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读 懂 本 书 


学 习 编 程 主要 是 兴 


期 望 读者 能 够 尽快 喜欢 上 ECMAScript 脚本 语言 。 


学 习 编 程 是 一 件 很 枯燥 的 事 ， 相 信 只 有 强烈 的 愿望 才 有 坚持 下 去 的 动力 。 编 程 语言 有 非常 : 
的 知识 反 需 要 掌握 ， 为 了 帮助 读者 快速 入 门 加 深 理 解 ， 笔 者 在 书 中 演示 了 大 量 、 有 趣 的 代码 实例 ， 


基础 知识 点 与 应 用 趋势 


本 书 重点 介绍 了 了 ECMAScript 原生 语法 基础 及 其 应 用 ， 特 别 增加 了 ECMAScript 6 版 本 新 特性 
的 内 容 ， 对 于 初学 者 需要 注意 的 方方面面 均 有 特别 提示 ， 以 期 帮助 读者 尽量 少 走 弯路 。 
本 书 真 的 适合 你 吗 


本 书 的 基础 知识 可 以 帮助 读者 快速 踏 入 ECMAScript 领域 之 门 , 可 以 随心 所 欲 地 把 这 些 知 识 应 
用 于 实践 开发 。ECMAScript 6 版 本 新 特性 部 分 可 以 让 读者 学 习 到 脚本 语言 的 新 技术 切入 点 ， 为 设 
计 人 员 打 开 一 扇 全 新 的 窗户 。 


本 书 完全 是 从 一 个 新 手 的 视角 出 发 讲解 ECMAScript 的 技术 和 应 用 ， 涵 盖 ES6、ES7、ES8 版 
本 的 不 同 特性 。 作 者 遵循 读者 的 学 习 心理 ， 循 序 渐进 、 由 浅 入 深 地 介绍 各 门类 、 相 互 关联 的 知识 。 
这 是 一 本 实例 书 ， 也 是 一 本 入 门 引 导 书 ， 是 想 教会 你 编写 代码 ， 而 不 是 教会 你 语法 。 

本 书 涉及 的 主要 软件 或 工具 


© Windows 


©® Mozilla Firefox e@ Notepad 
e EditPlus e@ Sublime Text ® WebStorm 
本 书 涉及 的 技术 或 框 染 
© CSS3 e HTTIP © RegExp 
e@ MIME ® ECMAScript6 ®。 DHTML 
e@ ECMAScript e HTIMLS 
本 书 特 点 


。 延迟 加 载 
(1) 本 书 不 是 强调 纯粹 的 理论 知识 ， 也 不 是 高 深 技术 研讨 ， 完 全 是 从 基础 知识 讲解 入 手 ， 用 
简单 的 、 典 型 的 示例 引申 出 核心 知识 ， 最 后 指引 了 通 往 “高 精 尖 ”进一步 深入 学 习 的 道路 。 


(2) 本 书 全 面 介绍 ECMAScript 脚本 语言 所 涉及 的 前 端 领域 、 后 端 应 用 范围 ， 能 够 综合 性 地 
领略 到 这 门 语言 的 全 貌 ， 在 学 习 的 过 程 中 不 会 迷失 方 问 。 


ECMAScript 从 零 开 始 学 ( 视频 教学 版 ) 


(3) 本 书 注重 知识 难点 探究 、 技 术 实 践 结合 应 用 场景 效果 ， 使 之 能 激发 读者 的 阅读 兴趣 且 能 
够 为 读者 提供 编程 参考 。 

(4) 本 书 代码 刹 循 重 构 原理 ， 避 人 免 代 人 码 污染 ， 真 心 希望 读者 能 写 出 优秀 的 、 和 侧 洁 的 、 可 维护 
的 代码 。 


源 代码 与 教学 视频 


本 书 配 套 的 源 代 码 与 教学 视频 可 以 通过 扫描 右边 的 二 维 码 获取 下 载 链 
接 ， 或 者 发 邮件 至 booksaga@163.com， 邮 件 主 题 为 “ECMAScript 从 零 开 始 ol 时 
学 ”。 如 果 有 问题 或 建议 ， 也 可 以 发 至 该 邮箱 。 





读者 对 象 


Web 前 端 设 计 的 初学 者 

从 事前 端 开发 的 人 员 

喜欢 或 从 事 网 页 设计 对 前 端 感 兴趣 的 人 员 
想 拓 展 前 端 知识 面 的 读者 

ECMAScript 爱好 者 

JavaScript 开发 人 员 


本 书 由 王 金 柱 主编 ， 其 他 参与 创作 的 还 有 张 婷 、 谢 志 强 、 李 一 鸣 、 王 晓 华 、 杨 旺 功 、 陈 明 红 、 
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开篇 之 章 ， 将 回 读 者 介绍 ECMAScript 的 基本 概念 、 发 展 历史 、 版 本 更 迭 、 组 成 部 分 、 基 本 特 
性 及 使 用 方法 这 些 基础 内 容 。 另 外 ，ECMAScript 源 自 于 JavaScript 脚本 语言 ， 二 者 之 间 的 异同 点 
也 是 本 章 的 重点 内 容 。 总 之 ，ECMAScript 语言 易学 易 用 、 技 术 领 先 、 功 能 强大 等 特点 是 Web 前 端 
设计 人 员 学 习 使 用 JavaScript 脚本 语言 的 重要 基础 (ECMAScript 是 标准 ，JavaScript 是 它 的 实现 ) 。 


1.1 认识 ECMAScript 


首先 简单 介绍 一 下 ECMAScript 脚本 语言 的 基本 概念 、 发 展 历史 .版 本 更 迭 和 组 成 部 分 等 内 容 。 


1.1.1 ECMAScript 的 基本 概念 


ECMAScript 是 由 Ecma 国际 (Ecma International ) 通过 ECMA-262 标准 化 规范 而 设计 的 脚本 
程序 设计 语言 。 这 个 Ecma 国际 前 身 即 欧 洲 计算 机 制造 商 协 会 (European Computer Manufacturers 
Association，ECMA) 。 也 就 是 说 ，ECMAScript 是 一 种 由 标准 组 织 推出 的 程序 设计 语言 。 

同时 , 在 互联 网 设计 开发 中 被 广泛 使 用 的 JavaScript 脚本 语言 , 实际 上 是 基于 ECMA-262 标准 
规范 而 设计 实现 的 。 因 此 ， 可 以 认为 ECMAScript 与 JavaScript 本 质 上 是 一 种 语言 ， 但 也 要 清楚 地 
认识 二 者 之 间 的 区 别 。 

不 过 ， 如 果 读 者 想 真 下 了解 ECMAScript 与 JavaScript 之 间 的 异同 ， 首 先 要 了 解 一 下 二 者 的 发 
展 历 史 。 
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1.1.2 ” JavaScript 与 ECMAScript 的 发 展 历史 


去 查阅 一 下 JavaScript 与 ECMAScript 二 者 的 发 展 历 史 ， 就 会 了 解 很 多 有 趣 的 历史 故事 ， 同 时 
也 将 体会 到 JavaScript 脚本 语言 能 够 走 到 今天 的 艰辛 。 

JavaScript 脚本 语言 的 发 展 历 史 可 以 用 一 波 三 折 、 精彩 纷呈 来 形容 。JavaScript 最 初 是 由 著名 的 
Netscape 公司 (网 景 公司 ) 的 Brendan Eich 于 1995 年 设计 提出 的 ， 当 然 最 初 也 是 在 Netscape 浏览 
器 上 实现 的 。 设 计 JavaScript 这 种 脚本 语言 的 目的 是 为 了 增强 浏览 器 功能 、 提 高 用 户 体 验 。 

其 实 ， 当 时 JavaScript 最 初 的 命名 是 LiveScript， 后 来 由 于 Netscape 公司 与 Sun 公司 进行 合作 
才 改名 为 JavaScript。 至 于 改名 为 JavaScript 的 原因 ， 相 信 大 多 数 读 者 猜 到 了 ， 主 要 是 源 于 Sun 公 
司 非常 著名 的 软件 产品 Java 语言 。 设 计 者 的 初衷 是 想 让 JavaScript 也 能 够 像 Java 那样 流行 。 
因此 , 今天 的 JavaScript 在 语法 和 命名 规范 上 或 多 或 少 都 有 Java 语言 的 影子 , 二 者 确实 有 大 和 干 丝 万 
缕 的 渊源 。 但 请 读者 一 定 要 注意 ，JavaScript 与 Java 本 质 上 是 完全 不 同 的 两 类 程序 设计 语言 。 

JavaScript 脚本 语言 在 发 展 初期 并 没有 确立 所 谓 的 统一 标准 ,但 因为 其 在 Netscape 浏览 器 上 的 
惊艳 表现 ， 随 后 其 他 软件 生产 商 也 陆续 推出 了 自己 的 产品 。 比 较 有 名 的 有 Miscrosoft 公司 的 Jscript 
语言 和 CEnvi 的 ScriptEase 语言 ， 与 JavaScript 语言 一 样 都 可 以 在 浏览 占 中 运行 。 尤 其 是 Jscript 语 
言 ， 其 与 nternet Explorer 浏览 器 可 谓 是 相得益彰 ， 在 与 Netscape 公司 浏览 器 的 竞争 中 也 是 后 来 居 上 。 
因此 ， 早 期 的 JavaScript 脚本 语言 并 没有 统一 的 标准 ， 完 全 是 各 大 浏览 器 软件 厂商 在 “各 日 为 政 ”。 

为 了 避免 各 大 浏览 器 软件 厂商 在 各 自 的 JavaScript 标准 上 越 走 越 远 ，1997 年 在 ECMA 的 提议 
协调 下 ， 由 Netscape、Sun、Miscrosoft 和 Borland 等 公司 组 成 了 工作 组 ， 最 终 确定 了 统一 的 脚本 语 
言 标准 规范 一 一 ECMA-262， 而 ECMA-262 标准 规范 也 就 是 ECMAScript。 

目前 ，ECMA-262 标准 规范 就 是 事实 上 的 脚本 语言 设计 标准 ， 各 大 浏览 器 软件 厂商 在 各 目的 
浏览 器 软件 产品 上 实现 脚本 功能 时 都 必须 遵循 ECMA-262 规范 ， 这样 就 可 以 保证 良好 的 兼容 性 了 。 
当然 , 各 大 浏览 器 软件 厂商 在 实现 一 些 功 能 特效 时 又 各 有 各 的 特点 , 这 也 是 脚本 语言 跨 平 台 设 计时 
需要 设计 人 员 注 意 的 。 





1.1.3 ECMAScript 版 本 更 迭 


ECMA-262 标准 规范 发 布 至 今 ，ECMAScript 主要 有 8 个 版 本 ， 具 体 如 下 : 
(1) ECMAScript 1 
1997 年 6 月 发 布 了 ECMAScript 1.0 版 ， 即 最 初 在 ECMA 的 提议 协调 下 ， 由 Netscape、Sun、 
Miscrosof 和 Borland 等 公司 组 成 的 工作 组 共同 研究 发 布 的 。 
(2) ECMAScript 2 
1998 年 6 月 发 布 了 ECMAScript 2.0 版 ， 并 进行 了 格式 修正 ， 使 其 形式 与 ISO/IEC16262 国际 
标准 保持 一 致 。 
(3) ECMAScript 3 
1999 年 12 月 ECMAScript 3.0 版 发 布 ， 实 现 了 正则 表达 式 功 能 ， 提 供 了 更 好 的 文字 链 处 理 方 
式 和 新 的 控制 指令 ， 对 异常 处 理 和 错误 定义 更 加 明确 等 。 这 个 版 本 成 为 JavaScript 脚本 语言 的 通行 
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标准 ， 得 到 前 器 设计 人 员 的 广泛 文 持 。 
(4) ECMAScript 4 

ECMAScript 4 是 很 复杂 的 一 个 版 本 。2007 年 10 月 ECMAScript 4.0 版 草案 发 布 出 来 后 ， 由 于 
升级 改进 的 程度 过 大 ， 各 方 发 生 了 严重 分 上 疏 。 大 型 的 软件 公司 (如 Microsoft、Google 和 Yahoo 等 ) 
均 反 对 进行 大 幅度 升级 改进 ， 而 以 Brendan Eich (JavaScript 最 初 设计 者 ) 为 首 的 Mozilla 公司 则 坚 
持 主张 按照 草案 执行 。 最 终 ，ECMA 决定 中 止 ECMAScript 4.0 版 本 的 开发 ， 对 草案 中 涉及 现 有 功 
能 改善 的 一 小 部 分 内 容 发 布 为 ECMAScript 3.1 版 本 ， 对 于 草案 中 的 大 部 分 内 容留 在 后 续 版 本 开发 
中 实现 。 

男 外 ,2004 年 6 月 ECMA( 欧 洲 计算 机 制造 商 协 会 ) 发 表 了 ECMA-357 标准 , 这 是 ECMAScript 
的 一 个 扩展 ， 因 此 也 被 称 为 E4X (ECMAScript for XML) 。 

($) ECMAScript $ 

2009 年 12 月 ，ECMAScript 5.0 版 正式 发 布 。2011 年 6 月 ，ECMAScript 5.1 版 发 布 ， 并 且 成 

为 ISO 国际 标准 (ISO/IEC 16262:2011) 。 
(6) ECMAScript 6 (ECMAScript 2015 ) 

2013 年 3 月 ，ECMAScript 6 草案 定稿 ， 将 不 再 添加 新 功能 。2015 年 6 月 17 日 ， 阁 名 的 
ECMAScript 6 正式 版 发 布 , 即 ECMAScript 2015。ECMAScript 6 是 继 ECMAScript 5 之 后 的 一 次 重 
要 改进 , 增添 了 许多 重要 特性 (如 模块 和 类 、Maps、Sets、Promises、Generators 等 )。 同 时 , ECMAScript 
6 保证 了 较 大 程度 地 兼容 以 前 的 版 本 ， 所 有 旧 代 码 都 可 以 正常 运行 。 当 然 ， 许 多 开发 者 们 抱怨 了 多 
年 的 老 问 题 也 依然 存在 。 

ECMA 的 第 39 号 技术 专家 委员 会 (Technical Committee 39，TC39) 负责 制定 ECMAScript 标 
准 ， 成 员 包 括 Microsoft、Mozilla、Google 等 大 公司 。TC39 的 职责 就 是 总 体 保 证 ECMAScript 新 版 
本 的 基本 兼容 性 ， 在 较 大 的 语法 修正 及 新 功能 特性 增加 方面 兼顾 老 版 本 的 语言 文 持 。 另 外 ，TC39 
规定 了 从 ECMAScript 6 开始 ， 新 版 本 将 按照 年 份 的 格式 (如 ECMAScript 2015) 进行 发 布 。 

(7) ECMAScript 7 (ECMAScript 2016) 

ECMAScript 2016 标准 规范 定义 了 一 个 重要 的 制定 原则 ， 即 成 文 标准 必须 从 事实 标准 中 诞生 ， 
也 就 是 要 先 实 现 再 制定 标准 。 同 时 ， 如 果 想 要 进入 标准 草案 ， 就 必须 有 两 个 以 上 的 JavaScript 引擎 
实现 的 支持 。 

(8) ECMAScript 8 (ECMAScript 2017 ) 

ECMAScript 2017 标准 规范 中 定义 了 许多 新 特性 ， 包 括 字 符 串 填充 、 对 象 值 过 历 、 对 象 的 属 

性 描述 符 获 取 、 函 数 参 数列 表 、 调 用 中 的 尾部 有 逗号、 异步 条 数 、 共 享 内 存 与 原子 操作 等 。 


1.1.4 JavaScript 与 ECMAScript 异同 


虽然 在 绝 大 多 数 情 况 下 ， 设 计 人 员 是 不 区 分 JavaScript 与 ECMAScript 这 两 个 概念 的 。 但 是 ， 
从 严格 意义 上 来 说 ,JavaScript 与 ECMAScript 还 是 有 所 区 别 的 .图 1.1 是 对 JavaScript 与 ECMAScript 
之 间 关 系 的 一 个 简单 概括 。 
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JavaScript 组 成 


ECMAScript 





1.1 JavaScript 与 ECMAScript 


从 图 1.1 中 可 以 看 到 ， 整 体 JavaScript 脚本 语言 包含 三 个 组 成 部 分 : ECMAScript 标准 规范 、 
文档 对 象 模型 (DOM) 和 浏览 器 对 象 模 型 (BOM) 。 关 于 这 三 个 组 成 部 分 的 描述 如 下 : 
@ 在 设计 实现 JavaScript 脚 本 语言 的 语法 和 基本 对 象 这 些 核心 内 容 时 所 遵循 的 就 是 ECMAScript 
标准 规范 。 
@ 文档 对 象 模型 (DOM ) 是 用 于 描述 JavaScript 脚本 语言 处 理 网 页 内 容 的 方法 和 接口 。 
@ 浏览 器 对 象 模型 (BOM ) 是 用 于 描述 JavaScript 脚本 语言 与 浏览 器 进行 交互 的 方法 和 接口 。 


因此 ， 从 严格 意义 上 来 说 ，ECMAScript 是 JavaScript 脚本 语言 组 成 中 的 一 部 分 ， 也 是 最 核心 
的 部 分 。JavaScript 脚本 语言 在 遵循 ECMAScript 标准 规范 (ECMA-262) 设计 的 同时 ， 还 设计 实现 
了 与 浏览 器 接口 交互 等 功能 。 


1.1.5 ” ECMAScript 脚本 语言 的 特点 


ECMAScript 是 一 种 应 用 于 Web 程序 开发 的 脚本 语言 ， 主 要 用 来 增强 网 页 的 动态 功能 ， 提 高 
用 户 的 交互 体验 。ECMAScript 脚本 语言 的 主要 特点 如 下 : 


e ECMAScript 是 一 种 解释 性 脚本 语言 (直译 式 ) ， 需 要 借助 浏览 器 和 解释 器 (JavaScript 脚本 
引擎 ) 执行 。 

e@ ” ECMAScript 脚本 语言 通常 是 说 入 在 HIML 网 页 代码 中 实现 交互 功能 好 

e 。 ECMAScript 脚本 语言 具有 很 友好 的 跨 平 台 特 性 (如 Windows、Linux、Mac、Android、iOS 
等 平台 ) ， 同 样 也 具有 跨 浏 览 器 特性 。 

e@ ECMAScript 脚本 语言 具有 面向 对 象 程序 设计 功能 . 

e 基于 ECMAScript 脚本 语言 开发 的 前 端 框架 十 分 丰富 ， 功 能 也 十 分 强大 。 


ECMAScript 脚本 语言 与 其 他 编程 语言 一 样 ， 文 持 基本 数据 类 型 、 表 达 式 、 算 术 运 算 符 及 基本 
程序 框架 。ECMAScript 脚本 语言 提供 了 4 种 基本 的 数据 类 型 和 两 种 特殊 数据 类 型 用 来 处 理 数据 和 
文字 ， 而 ECMAScript 表达 式 则 可 以 完成 比较 复杂 的 信息 处 理 。 


1.1.6 JavaScript 代码 解释 器 


本 质 上 JavaScript 是 一 种 直 详 式 的 脚本 语言 ， 是 内 置 文 持 动态 类 型 、 弱 类 型 、 基 于 原型 的 编程 
语言 。JavaScript 作为 直译 式 的 脚本 语言 ， 必 然 需 要 代码 解释 器 来 执行 脚本 程序 。 
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所 谓 代 人 码 解释 器 ， 其 实 就 是 在 执行 程序 时 负 员 将 代码 解释 成 机 器 语言 ， 然 后 交 由 计算 机 操作 
系统 运行 的 工具 。 所 以 ， 代 码 解 释 器 本 质 上 也 是 一 种 计算 机 程序 ， 类 似 于 Java 虚拟 机 的 概念 。 只 
不 过 JavaScript 代码 解释 器 是 负责 运行 脚本 代码 的 程序 ， 在 操作 系统 中 处 于 较 高 的 级 别 。 

代码 解释 器 对 于 诸如 JavaScript 此 类 的 直 详 式 脚 本 语言 是 极为 重要 的 , 算得 上 是 最 核心 的 组 成 
部 分 。 因 此 ， 设 计 人 员 习 惯 上 也 将 JavaScript 代码 解释 器 称 为 “JavaScript 引擎 ”。JavaScript 引擎 
就 是 运行 JavaScript 脚本 代码 的 核心 部 分 。 

目前 ， 主 流 浏览 器 厂商 的 做 法 是 将 JavaScript 代码 解释 器 全 部 内 置 于 浏览 器 内 部 。 虽 然 ， 各 大 
浏览 器 厂商 在 具体 实现 功能 上 各 有 特点 ,但 必须 遵循 ECMA( 欧 洲 计算 机 制造 商 协会 ) 的 EMCA-262 
标准 规范 进行 开发 ， 这 样 才 能 保证 最 大 程度 的 代码 兼容 性 。 

目前 , 主流 的 JavaScript 代码 解释 器 均 是 依托 于 主流 浏览 器 而 存在 的 .这 也 契合 当前 EMCA-262 
标准 规范 的 制定 原则 ， 只 有 功能 完全 实现 并 广泛 应 用 了 的 才 可 能 成 为 EMCA-262 标准 规范 。 

下 面 就 列举 一 些 当 前 主流 的 JavaScript 代码 解释 器 。 

@ Google 的 Chrome 浏览 器 


Chrome 浏览 器 使 用 的 是 著名 的 V8 引擎 ， 全 部 开放 源 代码 ， 内 置 于 Chrome 浏览 器 。V8 引擎 
是 目前 影响 力 、 性 能 都 很 强大 的 JavaScript 代码 解释 器 ， 许 多 主流 浏览 器 均 借 鉴 了 其 技术 。 
@ Mozilla 的 FireFox 浏览 器 


FireFox 浏览 器 所 使 用 的 JavaScript 代码 解释 器 经 历 了 很 复杂 的 历史 演变 过 程 。 早 期 的 Mozilla 
Firefox 1.0 一 3.0 版 本 使 用 的 是 SpiderMonkey， 是 由 Brendan Eich 在 Netscape Communications 时 期 
编写 的 ， 也 是 业界 的 第 一 球 JavaScript 引擎 。 

TraceMonkey 是 基于 实时 编译 的 JavaScript 代码 解释 器 , 其 中 部 分 代码 取 自 Tamarin 引擎 技术 ， 
主要 用 于 Mozilla Firefox 3.5 一 3.6 版 本 。 

JaegerMonkey 是 结合 了 追踪 和 组 合 码 技术 的 JavaScript 代码 解释 器 ， 程 序 性 能 大 幅 提 高 。 
JaegerMonkey 部 分 借鉴 了 Google V8、JavaScriptCore、WebKit 等 技术 , 主要 用 于 Mozilla Firefox 4.0 
以 上 版 本 。 

e@ 微软 的 正 系 列 和 Edge 浏览 器 


早期 的 Internet Explorer (IE3 一 IE8) 版 本 使 用 的 是 微软 上 自己 的 JScript 代码 解释 器 ， 在 IE9 版 
本 后 使 用 的 是 名 称 为 Chakra( 查 克拉 ) 的 JavaScript 代码 解释 器 。 随 着 Windows 10 一 同 发 布 的 
Microsoft Edge 浏览 器 沿用 了 Chakra 引擎 ， 做 了 很 多 改进 。 


e@ Opera 浏览 器 
Opera 浏览 器 使 用 的 是 JavaScript 引擎 ， 也 很 复杂 。Linear A 引擎 用 于 Opera 4.0 一 6.1 版 本 ， 


Linear B 引擎 用 于 Opera 7.0 一 9.2 版 本 ，Futhark 引擎 用 于 Opera 9.5 一 10.2 版 本 ， 而 Carakan 引擎 是 
由 Opera 软件 公司 自己 编写 的 ， 在 Opera10.50 版 本 以 后 开始 使 用 。 


@ Apple 的 Safari 浏览 器 





目前 的 Safari 浏览 器 使 用 的 是 Nitro 引擎 ， 也 就 是 原来 的 SquirrelFish 系列 引擎 。 


e Tamarin 引擎 


前 文 提 到 的 Tamarin 引擎 是 由 Adobe Labs 编写 的 ， 只 有 Flash Player 9 在 使 用 。 


1.2 在 网 页 中 使 用 ECMAScript 脚本 语言 


本 节 我 们 介绍 如 何在 HTML 网 页 中 使 用 ECMAScript 脚本 语言 ， 具 体 就 是 使 用 <scrip 刀 标签 编 
写 ECMAScript 脚本 代码 的 方法 。 


1.2.1 ”<script> 标 签 


如 果 想 在 HTML 网 页 中 使 用 ECMAScript 脚 本 语言 ,那么 一 定 会 用 到 <script> 标 签 。 通 过 <script> 
标签 既 可 以 编写 艇 入 式 脚 本 代码 ， 也 可 以 引入 外 部 脚本 文件 。 同 时 ，<scrip 人 标签 作为 一 种 标记 符 
号 ， 均 需要 成 对 《〈 开 始 标记 <scrip 刀 和 结束 标记 </script>) 使 用 。 

下 面 是 嵌入 式 脚 本 代码 的 具体 示例 : 

<aCe3DpE> 

// TODO: 脚本 代码 

亲 

以 上 写法 是 基于 HTMLS 版 本 网 页 的 ， 而 对 于 HTML 4.01 版 本 的 网 页 ， 则 一 定 要 使 用 下 面 的 
写法 : 

<script type="text/javascript"> 

// TODO: 脚本 代码 

a 

如 上 代码 所 示 ， 需 要 在 <scrip 人 标签 中 加 入 “type="text/javascript"” 的 属性 描述 ， 才 能 让 浏览 
器 正确 识别 HTML 网 页 。 

下 面 是 引入 外 部 脚本 文件 的 具体 代码 示例 : 

<aCript SPC="ECMASCript. 3"></acript> 

以 上 是 常规 写法 ， 还 可 以 使 用 下 和 面 的 简化 写法 : 

<script src="ECMAScript.js" /> 

如 上 代码 所 示 ， 可 以 省 略 结束 标记 </script>， 但 需要 同时 在 开始 标记 <scrip 全 的 最 后 加 上 符号 
(/) 表示 标记 结束 。 


1.2.2 骨 入 式 ECMAScript 脚本 


冉 入 式 ECMAScript 脚本 是 在 网 页 中 使 用 脚本 代码 比较 重音 直接 的 方法 。 该 方式 的 优点 束 是 可 
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以 将 脚本 代码 插入 HTML 网 页 中 的 任何 位 置 ， 只 需要 使 用 <scrip 全 标签 编写 ECMAScript 脚本 代码 


印 可 。 


下 面 是 一 个 在 HTML 网 页 中 使 用 机 入 式 ECMAScript 脚本 代码 的 示例 ( 详 见 源 代码 ch01 目录 
中 的 ch01-es-embed.html 文件 ) 。 


【代码 1-1】 
01 <!doctype html> 
02 <html] lang="en"> 
03 <head> 
04 <!-- 添加 文档 头 部 内 容 --> 
05 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
06 <meta http-equiv="Content-Language" content="zh-cn" /> 
07 <link rel="stylesheet" type="text/css" href="css/style.css"> 
08 <script> 
09 alert ("ECMAScript - 区 入 脚本 代码 ") ; 
OASCTI > 
11 <title>ECMAScript in 15-days</title> 
12 </head> 
13 <body> 
14 <!-- 添加 文档 主体 内 容 --> 
15 <header> 
16 <nav>ECMAScript - 典 入 脚本 代码 </nav> 
17 </header> 
Lo <hre> 
19 <!-- 添加 文档 主体 内 容 --> 
20 </body> 
Ze < /heml> 


关于 【代码 1-1】 的 分 析 如 下 : 

第 08 一 10 行 代码 通过 <scrip 人 标签 定义 了 一 段 戏 入 式 ECMAScript 脚本 代码 ， 第 09 行 的 脚本 
代码 通过 “alert() ”函数 定义 了 一 个 弹出 式 警 告 提示 框 。 

下 面 通过 FireFox 浏览 器 测试 一 下 【代码 1-1】 所 定义 的 HTML 页 面 ， 查 看 页 面 中 嵌入 式 
ECMAScript 脚本 代码 的 执行 效果 ， 如 图 1.2 所 示 。 


» localhost:63342/Webst. x pa 


X |© localhost: “加 站 三 


ECMAScript - 嵌入 脚本 代码 





Read localhost 


12 ” 藤 入 式 ECMAScript 脚本 代码 


如 图 1.2 所 示 , 【代码 1-1]】 中 第 09 行 脚本 代码 定义 的 弹出 式 警告 提示 框 在 页 面 加 载 过 程 中 成 
功 显示 出 来 了 。 注 意 , 到 此 时 页 面 应 该 还 没有 加 载 完成 , 关于 这 一 点 我 们 在 后 文中 会 给 出 原因 分 析 。 
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1.2.3 引入 外 部 ECMAScript 脚本 文件 


在 HTML 网 页 中 引入 外 部 ECMAScript 脚本 文件 是 另 一 种 使 用 脚本 语言 的 方法 ， 这 种 方法 非 
常 适用 于 需要 使 用 大 量 ECMAScript 脚本 代码 的 情况 。 一 般 来 说 , 这 种 方法 称 为 外 链 式 ECMAScript 
脚本 。 

外 链 式 ECMAScript 脚本 的 基本 使 用 方法 如 下 : 


pint gre rl /gi 


这 里 ，“src” 属 性 用 于 定义 外 部 ECMAScript 文件 的 路 径 地 址 。 其 中 ， 路 径 既 可 以 是 绝对 路 
径 ， 也 可 以 是 相对 路 径 ， 需 要 根据 具体 情况 来 定 。 

下 面 将 【代码 1-1】 稍 加 修改 ， 按 照 外 链 式 ECMAScript 脚本 进行 设计 ， 有 具体 代码 如 下 ( 详 见 
源 代码 ch01 目录 中 的 ch01-es-linking.html 文件 ) 。 

【代码 1-2】 


01 <i!ldoctype htm]> 

02 <html] lang="en"> 

03 <head> 

04 <!-- 添加 文档 头 部 内 容 --> 

05 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
06 <meta http-equiv="Content-Language" content="zh-cn" /> 

07 <link rel="stylesheet" type="text/css" href="css/style.css"> 

08 <script type="text/javascript" src="js/ch01l-es-linking.js"></script> 
09 <title>ECMAScript in 1l5-days</title> 

10 </head> 

11 <body> 

12 <!-- 添加 文档 主体 内 容 --> 


3 <header> 


14 <nav>ECMAScript - 外 链 式 脚本 文件 </nav> 
15 </header> 

160 <he> 

17 <!-- 添加 文档 主体 内 容 --> 

18 </body> 

19 </html> 


关于 【代码 1-2】 的 分 析 如 下 : 

第 08 行 代码 通过 <scrip 亿 标签 定义 了 外 链 式 ECMAScript 脚本 文件 ， 其 中 “src” 属 性 定义 了 外 
部 脚本 的 相对 路 径 地 址 〈"js/ch01-es-linking.js") 。 

关于 上 面 引入 的 外 部 脚本 文件 的 具体 代码 如 下 ( 详 见 源 代码 ch01 目录 中 的 js/ch01-es-linking.js 
文件 ) 。 

【代码 1-3】 

01 alert ("ECMAScript - 外 链 式 脚本 文件 ") ; 

这 行 脚本 代码 通过 “alert()” 函 数 定义 了 一 个 弹出 式 警 告 提示 框 。 

运行 【代码 1-2】 使 用 外 链 式 ECMAScript 脚本 文件 定义 的 HTML 页 面 ， 页 和 面 打开 后 的 效果 如 
图 1.3 所 示 。 
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Mozilla Firefox 
*。 localhost:63342/Webst’ x ms 


X |© localhost:63342 “| 三 


ECMAScript - 外 链 式 脚本 文件 





Read localhost 


1.3 ”外 链 式 ECMAScript 脚本 


通过 图 1.3 与 图 1.2 的 效果 对 比 , 可 以 发 现在 HTML 页 面 中 无 论 是 使 用 外 链 式 脚本 还 是 能 入 式 
脚本 ， 实 现 的 功能 是 完全 一 样 的 。 


1.3 “ECMAScript 脚本 运行 机 制 


理论 上 ，ECMAScript 脚本 代码 可 以 定义 在 HTML 网 页 中 的 任何 位 置 。 比 如 ， 可 以 定义 在 页 面 
头 部 <head> 标 签 内 ， 也 可 以 定义 在 页 面 主体 <body> 标 签 内 任意 位 置 ， 还 可 以 定义 在 页 面 <body> 标 
签 之 后 。 那 么 ，ECMAScript 脚本 代码 定义 在 HTML 页 面 中 的 不 同位 置 有 没有 什么 区 别 呢 ? 

要 想 解 答 这 个 疑问 ， 就 要 先 理解 HTML 网 页 的 运行 机 制 。HTML 网 页 是 按照 页 面 代码 定义 的 
先后 顺序 自 上 而 下 依次 执行 的 。 我们 在 浏览 网 页 时 就 会 发 现 , 页面 内 容 其 实 是 自 上 而 下 依次 刷新 出 
来 的 。 因 此 ， 对 于 定义 在 HTML 页 面 中 的 ECMAScript 脚本 代码 ， 会 随 着 HTML 网 页 自 上 而 下 的 
顺序 执行 。 同 时 ，ECMAScript 脚本 代码 自身 是 按照 中 断 机 制 执行 的 ， 也 就 是 说 HTML 网 页 遇 到 脚 
本 代码 时 会 中 止 执行 ， 直 到 脚本 代码 解析 完成 后 网 页 才 会 继续 运行 。 

ECMAScript 脚本 代码 的 运行 机 制 会 带 来 一 个 很 大 的 问题 ， 那 就 是 ECMAScript 脚本 代码 定义 
在 HTML 网 页 中 不 同 的 位 置 会 对 HTML 页 面 在 浏览 器 中 的 显示 效果 产生 很 大 的 影响 。 

下 面 先 看 一 个 将 ECMAScript 脚本 代码 定义 在 页 面 头 部 <head> 标 签 中 的 实例 ， 具 体 代 码 如 下 

( 详 见 源 代码 ch01 目录 中 的 ch01-es-run-in-head.html 文件 ) 。 
【代码 1-4】 


01 <!doctype html> 

02 <html lang="en"> 

03 <head> 

04 <!-- 添加 文档 头 部 内 容 --> 

05 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
06 <meta http-equiv="Content-Language" content="zh-cn" /> 

07 <link rel="stylesheet" type="text/css" href="css/style.css"> 
8 <Seripb> 

09 alert ("ECMAScript 脚本 代码 定义 在 页 面 头 部 <head> 标 签 元 素 内 ."); 
Wcript> 

11 <title>ECMAScript in 1l5-days</title> 

12 </head> 
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13 <body> 
14 <!-- 添加 文档 主体 内 容 --> 


Ls <header> 


16 <nav>ECMAScript - 脚本 代码 运行 机 制 </nav> 
17 </header> 
18 < 


19 <!-- 添加 文档 主体 内 容 --> 

20 <h3> 正 文 </h3> 

2 > 

ECMAScript 脚本 代码 定义 在 页 面 头 部 &lt ;headggt ;标签 元 素 内 . 

2300 </b> 

24 </body> 

25 </html> 

关于 【代码 1-4】 的 分 析 如 下 : 

第 08 一 10 行 代 码 通过 <scrip 亿 标签 定义 了 一 段 仍 入 式 ECMAScript 脚本 代码 ， 第 09 行 的 js 代 
码 通 过 “alert0)” 图 数 定 义 了 一 个 弹出 式 警 告 提 示 框 。 

第 13 一 24 行 代 码 <body> 标 签 内 定义 了 一 些 页 面 内 容 ， 包 括 标 题 和 正文 文本 。 

运行 【代码 1-4】 定 义 的 HTML 页 面 查看 一 下 ECMAScript 脚本 代码 的 执行 效果 ， 如 图 1.4 所 
示 。 

如 图 1.4 所 示 ， 第 08 一 10 行 代 人 码 定义 的 警告 提示 框 弹 出 来 了 ， 但 页 和 面 中 定义 的 文本 内 容 却 没 
有 显示 出 来 ， 浏览 器 窗口 还 是 灰色 的 。 这 就 说 明了 ECMAScript 脚本 代码 的 中 断 执行 机 制 ， 由 于 本 
例 脚 本 代码 定义 在 <head> 标 签 内 ， 因 此 页 和 面 内 容 还 没有 加 载 完 成 就 被 运行 的 脚本 代码 中 断 了 。 

单 击 警告 提示 框 中 的 OK 按钮 将 脚本 代码 执行 完成 ， 效 果 如 图 1.5 所 示 。 


Mozilla Firefox 






ECMAScript in 15-days - Mozilla Firefox 
* localhost:63342/Webst Xx iss 


ECMAScriptin15-days Xx 





X © localhost:63342 v = as 


D localhost:63342 » 


ECMAScript - 脚本 代码 运行 机 制 
ECMAScript 脚 本 代码 定义 在 页 面 头 部 
<head> 标 签 元 素 内 . 


正文 


ECMAScript 脚 本 代码 定义 在 页 面 头 部 <head> 标 签 元 素 内 . 





Transferring data from localhost... 


1.4 定义 在 页 面 头 部 的 ECMAScript 脚本 (1) 1.5 定义 在 页 面 头 部 的 ECMAScript 脚本 〈2) 


如 图 1.5 所 示 ， 直 到 ECMAScript 脚本 代码 执行 完毕 后 ， 页 面 内 容 才 会 加 载 完 成 并 显示 在 浏览 
器 中 。 

下 面 继续 看 一 个 将 ECMAScript 脚本 代码 定义 在 页 面 主体 <body> 标 签 中 的 实例 (ECMAScript 
脚本 是 允许 定义 在 HTML 页 面 中 任何 位 置 的 ) ， 具 体 代 码 如 下 ( 详 见 源 代码 ch01 目录 中 的 
ch01-es-run-in-body.html 文件 ) 。 

【代码 1-5】 


01 <!doctype html> 
02 <html lang="en"> 


10 


03 
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<head> 
<!-- 添加 文档 头 部 内 容 --> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta http-equiv="Content-Language" content="zh-cn" /> 
<link rel="stylesheet" type="text/css" href="css/style.css"> 
<title>ECMAScript in 1l5-days</title> 
</head> 
<body> 
<!-- 添加 文档 主体 内 容 --> 
<header> 
<nav>ECMAScript - 脚本 代码 运行 机 制 </nav> 
</header> 
<hr> 
<!-- 添加 文档 主体 内 容 --> 
cel 
alert ("ECMAScript 脚本 代码 定义 在 页 面 主体 <body> 标 签 元 素 内 ."); 
< /SC 
<h3> 正 文 </h3> 
<p> 
ECMAScript 脚本 代码 定义 在 页 面 主体 &1lt ;bodyg&gt ;标签 元 素 内 . 
<yPD> 
</body> 
</html> 


关于 【代码 1-5】 的 分 析 如 下 : 

第 17 一 19 行 代码 通过 <script> 标 签 定义 了 一 段 戏 入 式 ECMAScript 脚本 代码 ,其 定义 位 置 是 在 
页 面 主体 <body> 标 签 中 的 ， 第 18 行 的 脚本 代码 通过 “alert()” 函 数 定义 了 一 个 弹出 式 警 告 提示 框 。 

在 第 17 一 19 行 脚本 代码 的 前 后 分 别 定义 了 一 些 页 面 内 容 ， 包 括 标题 和 正文 文本 。 

运行 【代码 1-5】 定 义 的 HTML 页 面 查看 一 下 ECMAScript 脚本 代码 的 执行 效果 ， 如 图 1.6 所 


不 。 






ECMAScript in 15-days - Mozilla Firefox 


* ECMAScriptin 15-days Xx Ws 


> XX | OO localhost:63342/Webstormpr “加 六 | 罗 三 


ECMAScript 脚 本 代码 定义 在 页 面 主体 
<body> 标 等 元素 内 . 





Read localhost 


1.6 ”定义 在 页 面 主体 中 的 ECMAScript 脚本 〈1) 


如 图 1.6 所 示 ， 第 17 一 19 行 代 码 定义 的 警告 提示 框 弹 出 来 了 ， 同 时 大 家 注意 图 中 箭头 指 回 的 
内 容 ; 第 12 一 14 行 代码 定义 的 页 面 标题 和 第 15 行 代码 水 平分 割 线 已 经 显示 出 来 了 ， 但 第 20 一 23 
行 代码 定义 的 页 面 正文 却 没 有 显示 出 来 。 
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这 是 由 ECMAScript 脚本 代码 的 中 断 执 行 机 制 引 起 的 ， 因 为 本 例 中 脚本 代码 定义 在 第 17 一 19 
行 ， 正 好 在 页 面 文本 内 容 的 中 间 。 
单 击 警告 提示 框 中 的 OK 按钮 将 脚本 代码 执行 完毕 ， 效 果 如 图 1.7 所 示 。 


ECMAScript in 15-days - Mozilla Firefox 


ECMAScriptin 15-days Xx 


G | © localhost:6334 


ECMAScript - 脚本 代码 运行 机 制 


正文 


ECMAScript 脚 本 代码 定义 在 页 面 主 体 <body> 标 签 元 素 内 . 





1.7 定义 在 页 面 主体 中 的 ECMAScript 脚本 (2) 


如 图 1.7 所 示 ， 直 到 ECMAScript 脚本 代码 执行 完毕 后 ， 后 面 的 页 和 面 内 容 才 加 载 完 成 显示 在 浏 


最 后 ， 看 一 个 将 ECMAScript 脚本 代码 定义 在 页 和 面 主体 <body> 标 签 后 的 实例 (之 后 会 有 总 结 
分 析 ) ， 有 具体 代码 如 下 “〈 详 见 源 代码 ch01 目录 中 的 ch01-es-run-in-end.html 文件 ) 。 
【代码 1-6】 


01 
02 
V3 
04 
05 
06 
QU 
08 
U9 
10 


<!dqoctype html> 
<htm] lang="en"> 
<head> 
<!-- 添加 文档 头 部 内 容 --> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta http-equiv="Content-Language" content="zh-cn" /> 
<link rel="stylesheet" type="text/css" href="css/style.css"> 
<title>ECMAScript in 15-days</title> 
</head> 
<body> 
<!-- 添加 文档 主体 内 容 --> 
<header> 
<nav>ECMAScript - 脚本 代码 运行 机 制 </nav> 
</header> 
<hr> 
<!-- 添加 文档 主体 内 容 --> 
<h3> 正 文 </h3> 
<p> 
ECMAScript 脚本 代码 定义 在 页 面 主 体 &lt ;bodyg&gt ;标签 元 素 后 . 
< /p> 
</body> 
<script type="text/javascript" src="js/ch0l-es-run-in-end.js"></script> 
</html> 


关于 【代码 1-6】 的 分 析 如 下 : 

第 10 一 21 行 代码 在 页 面 主体 <body> 标 签 内 定义 了 一 些 页 面 内 容 ， 包 括 标题 和 正文 文本 。 

第 22 行 代 码 通过 <scrip 伺 标签 定义 了 外 链 式 ECMAScript 脚本 ， 其 中 “src” 属 性 定义 了 外 部 脚 
本 的 相对 路 径 地 址 ("js/ch01-es-run-in-end.js") ; 这 里 ECMAScript 脚本 的 位 置 是 放 在 <body> 标 签 


有 
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后 的 ， 即 HTML 网 页 的 最 后 。 

关于 上 和 面 引入 的 外 部 脚本 文件 的 具体 代码 如 下 〔 详 见 源 代码 ch01 目录 中 的 js/ch01-es-run-in- 
end.js 文件 ) 。 

【代码 1-7】 

01 alert("ECMRAScript 脚本 代码 定义 在 页 面 主 体 <body> 标 签 元 素 后 .") ; 


关于 【代码 1-7】 的 分 析 如 下 : 

第 01 行 js 代码 通过 “alert()” 函 数 定义 了 一 个 弹出 式 警告 提示 框 ， 与 前 面 两 个 实例 的 JS 脚本 
功能 类 似 。 

运行 【代码 1-6】 定 义 的 HTML 页 面 查看 一 下 ECMAScript 脚本 代码 的 执行 效果 ， 如 图 1.8 所 示 。 

如 图 1.8 所 示 ， 第 17 一 19 行 代码 定义 的 警告 提示 框 弹出 来 了 ， 同 时 大 家 注意 图 中 箭头 指向 的 
内 容 ( 部 分 内 容 被 弹出 框 遮盖 了 〉; 第 10 一 21 行 代码 定义 的 页 面 内 容 已 经 全 部 显示 出 来 了 。 这 说 
明 本 例 中 引用 在 页 面 主体 <body> 标 签 后 的 脚本 代码 是 在 页 面 内 容 全 部 加 载 完 毕 后 执行 的 ， 与 
ECMAScript 脚本 定义 的 位 置 是 一 致 的 。 
单 击 警告 提示 杠 中 的 OK 按钮 将 脚本 代码 执行 完毕 ， 效 果 如 图 1.9 所 示 。 


ECMAScript in 15-days - Mozilla FireFox 





* ECMAScriptin 15-days Xx Ws 


”又 | @ localhost:63342h\ … 回 他 » 三 ECMAScript in 15-days - Mozilla Firefox 





园 ECMAScriptin15-days x hs 


> GG | © localhost “加 三 


ECMAScript 肢 本 代码 定义 在 页 面 主体 


<body> 标 答 元 系 后 ECMAScript - 脚本 代码 运行 机 制 


正文 
ECMAsScript 脚 本 代码 定义 在 页 面 主体 <body> 标 签 元 素 后 . 





Read localhost 


1.8 定义 在 页 面 最 后 的 ECMAScript 脚本 〈1) 1.9 定义 在 页 面 最 后 的 ECMAScript 脚本 (2) 


通过 以 上 3 个 实例 ， 大 致 了 解 了 ECMAScript 脚本 代码 在 HTML 网 页 中 定义 的 位 置 对 于 页 面 
执行 效果 的 影响 。 下 面 简 单 总 结 一 下 ECMAScript 脚本 代码 的 位 置 在 HTML 网 页 中 定义 的 原则 。 

第 一 ， 尽 可 能 地 将 ECMAScript 脚本 代码 〈 包 括 能 入 式 和 外 链 式 ) 放 在 <body> 标 签 之 后 ， 这 
样 在 HTML 网 页 内 容 加 载 时 就 不 会 因为 脚本 代码 的 中 断 执 行 机 制 而 延迟 阻塞 ， 目 然 就 提高 了 页 面 
的 显示 速度 。 

第 二 ， 如 果 要 实现 一 些 页 面 特效 ， 需 要 预先 动态 加 载 一 些 ECMAScript 脚本 代码 ， 那 么 这 些 脚 
本 代码 应 该 放 在 <head> 标 签 内 或 <body> 标 签 的 前 面 。 

第 三 ， 对 于 需要 使 用 ECMAScript 脚本 代码 动态 访问 操作 页 面 DOM 元 素 的 情况 ， 要 将 脚本 代 
码 放 在 DOM 元 素 定 义 之 后 (依据 第 一 条 原则 ， 最 好 统一 放 在 <body> 标 签 之 后 ); 否则 ， 如 果 放 在 
DOM 元 素 定 义 之 前 , 就 会 因为 DOM 元 素 还 没有 生成 而 出 现 脚 本 代码 访问 错误 或 无 效 操作 的 情况 。 

以 上 就 是 ECMAScript 脚本 代码 定义 位 置 的 基本 原则 ， 当 然 原 则 绝 不 是 一 成 不 变 的 , 需要 根据 
具体 情况 灵活 运用 。 
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1.4 ”ECMAScript 脚本 代码 的 开发 与 调试 


本 节 将 通过 一 个 实例 介绍 ECMAScript 脚本 语言 开发 与 调试 的 基本 方法 , 包括 ECMAScript 脚 
本 语言 开发 工具 和 调试 工具 的 使 用 。 

开发 与 调试 ECMAScript 脚本 语言 的 方式 非常 灵活 ,可 供 选 择 的 工具 也 非常 多 。 我 们 既 可 以 使 
用 相对 简单 的 轻 量 级 代码 编辑 器 (如 EditPlus、Sublime Text、UltraEdit 等 ) ， 也 可 以 使 用 功能 非 
常 强 大 的 集成 开发 平台 〈 如 Visual Studio、jetBrains WebStorm、Adobe Dreamweaver 等 ) 编辑 脚本 
代码 。 前 一 类 属于 轻 量 级 的 代码 编辑 器 ， 具 有 简洁 快速 的 特点 ， 同 时 功能 也 非常 健全 ， 唯 一 不 足 的 
是 调试 代码 需要 自行 配置 的 内 容 较 多 ; 后 一 类 属于 重量 级 集成 开发 平台 , 具有 强大 的 代码 管理 和 调 
试 功能 ， 对 于 开发 大 型 Web 项 目 是 比较 好 的 选择 ， 如 果 使 用 得 当 ， 那 么 效率 会 成 倍 提高 。 

另外 , 对 于 ECMAScript 脚本 语言 的 调试 , 专业 的 做 法 是 使 用 带 有 脚本 代码 调试 功能 的 浏览 器 
来 进行 。 本 书 选 用 了 目前 比较 流行 的 Google Chrome、Firefox 和 Opera 这 几 款 主流 厂商 的 浏览 器 。 
这 几 球 浏览 器 均 内 置 有 脚本 代码 调试 功能 ， 且 调试 界面 、 功 能 和 方法 大 同 小 异 , 读者 可 根据 个 人 偏 
好 自行 选择 一 于 浏览 器 进行 测试 。 

下 面 就 通过 一 个 具体 的 ECMAScript 脚本 代码 案例 介绍 一 下 脚本 代码 开发 与 调试 的 基本 步骤 。 

e@ 操作 系统 环境 : Ubuntu 16.04 LTS 版 本 (基于 ECMAScript 脚本 语言 的 平台 无 关 性 ， 本 书 的 示 

例 代码 完全 兼容 Windows 操作 系统 ， 请 读者 直接 使 用 Windows 操作 系统 ) 。 

@ 集成 开发 平台 : WebStorm 2017.3。 

e 代码 编辑 器 : Sublime Text 3。 

@ 浏览 器 : FireFox。 


1.4.1 第 一 步 : 使 用 WebStorm 集成 开发 平台 创建 项 目 、 页 面 文件 





1.10 打开 WebStorm 开发 平台 
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Eile Edit Vv 
New 
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总 Scratch File Ctrlzalt+shiftansert 


Ctrlzshift+s mm Directory 


”总 HTMLFile 
i Stylesheet 
Javascript File 


SF Settings... Ctrl+Altts 如 Typescript File 


Default Settings... 


Import Settings... 


意 tsconfig.json File 
”个 packagejson File 

Pug/Jade File 

访 CoffeeScript File 


ctrlrs VueComponent 


Ctrlzalt+y Bm XSLTStylesheet 


Add to Favorites 
File Encoding 
Line Separators 


Make Directory Read-only 


Remove BOM 
Power Save Mode 
Exit 


Edit File Templates... 





1.11 新 建 工程 





如 图 1.11 中 箭头 所 指 ， 通 过 沫 单 选项 新 建 一 个 Web 工程 项 目 ， 并 选择 工程 项 目的 路 径 ， 命 名 


为 es-15days， 如 图 1.12 所 示 。 


New Project 
Empty Project 
日 HTMLS Boilerplate 
《y Web starter Ki 
党 React App 
加 Twitter Bootstrap 
Foundation 
本 AngularJs 
人 Angular CLI 
笃 React Native 
中 Node.js Express App 
精 Cordova App 
® Yeoman 
RS Meteor App 
态 Dart 


然后 ， 在 工程 项 目 中 新 建 一 个 HTMLS5 网 页 文件 ， 命 名 为 ch01-es-debug， 如 图 1.13 所 示 。 


New project 


Location: | /home/king/WebstormProjects/es-15days| 





1.12 创建 es-15days 工程 


New HTML File 


Name: | cho1-es-debug| 11 


tne 





1.13 创建 HTMLS5 网 页 


HTMLS 网 页 文件 (ch01-es-debug.html〉 中 定义 的 代码 如 下 〔( 详 见 源 代 码 ch01 目录 中 的 


ch10-es-debug.html 文件 ) 。 
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【代码 1-8】 


WL 
02 
03 
04 
05 
06 
WT 
08 
09 
10 
bal 
12 
13 
14 
lbs) 
16 
a 
18 
b>, 
20 
2 


<!doctype html> 
<html lang="en"> 
<head> 
<!-- 添加 文档 头 部 内 容 --> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta http-equiv="Content-Language" content="zh-cn" /> 
<link rel="stylesheet" type="text/css" href="css/style.css"> 
<title>ECMAScript in 15-days</title> 
</head> 
<body> 
<!-- 添加 文档 主体 内 容 --> 
<header> 
<nav>ECMAScript - 脚本 代码 编辑 与 调试 </nav> 
</header> 
debe 
<!-- 添加 文档 主体 内 容 --> 
<div id="id-div-count"> 
<Vdiy> 
</body> 
<script type="text/javascript" src="js/ch01l-es-debug.js"></script> 
</html> 


关于 【代码 1-8】 的 分 析 如 下 : 

第 17 一 18 行 代 码 通过 <div> 标 签 定 义 了 一 个 层 元 素 ， 用 于 动态 输出 页 面 内 容 。 

第 20 行 代码 通过 <scrip 亿 标签 引入 了 外 部 ECMAScript 脚本 文件 ， 其 中 “sre” 属 性 定义 了 外 音 
脚本 文件 的 相对 路 径 地 址 《〈"js/ch01-es-debug.js") 。 


1.4.2 ”第 二 步 : 使 用 WebStorm 集成 开发 平台 创建 脚本 文件 


下 面 通过 WebStorm 开发 平台 创建 【代码 1-8】 中 引入 的 “ch01-es-debug.js” 脚 本 文件 ， 如 图 
1.14 所 示 。 


Name: | cho1-es-debug| 蕊 


Kind: | 品 JavaScript file | 图 


ok 
1.14 “创建 ECMAScript 脚本 文件 





一 般 情 况 下 不 建议 使 用 WebStorm 集成 开发 平台 编辑 代码 ( 因 其 太 重 量 级 了 ) ， 建 议 使 用 
Sublime Text 这 类 代码 编辑 器 编写 脚本 代码 ， 如 图 1.15 所 示 。 

Sublime Text 代码 编辑 器 简洁 、 快 速 、 易 于 上 手 ， 编 写 具 体 代 人 码 时 比 使 用 集成 开发 工具 有 一 定 
优势 。 当 然 ， 这 点 也 是 根据 个 人 喜好 因 人 而 异 的 ， 没 有 高 低 优 劣 之 分 。 
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/***-Sublime Text 


/** 
* Created by KING on 2018/01/18, 
家 


count = document.getElementById("id-div-count"); 


让 + i.toString(} + "<br>"; 
console.log(strLine); 
v_ aid div_count .innerHTML +~ strLine; 





图 1.15 使 用 Sublime Text 3 编写 脚本 代码 


ECMAScript 脚本 文件 〈《ch01-es-debug.js) 中 定义 的 代码 如 下 《〈 详 见 源 代码 ch01 目录 中 的 
js/ch01-es-debug.js 文件 ) 。 
【代码 1-9】 


01 var Vv id div count = document .getElementBYId ("id-div-count"); 
02 var strLine; 
03 forl(var i=]; i<=10; i++) f{ 


04 Strline = Mi" TF I .Eostring(l) TT TADr>ns 
05 console.log(strLine); 

06 Vv id div count.innerHTML += strLine; 
Wr 


【代码 1-9】 的 主要 功能 是 癌 HTML 网 页 中 循环 动态 写 入 文本 ， 关 于 每 行 代码 的 具体 功能 含 
义 我 们 在 后 面 章节 的 学 习 中 会 逐步 介绍 。 


1.4.3 ”第 三 步 : 使 用 Firefox 浏览 器 运行 HTML 页 面 和 调试 脚本 代码 


使 用 Firefox 浏览 器 运行 【代码 1-8】 定 义 的 HTML 网 页 (ch01-es-debughtml) ， 如 图 1.16 所 示 。 


ECMAScript in 15-days - Mozilla Firefox 





贺 ECMAScript in 15-days 


GG | © localhost “加 》 三 


ECMAScript - 脚本 代码 编辑 与 调试 


和 全 人 人 人 和 人 二 
己 连 上 出 二 上 世上 上册 及 


号 


1.16 使 用 Firefox 浏览 器 运行 脚本 代码 
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打开 Firefox 浏览 器 的 调试 功能 面板 ， 如 图 1.17 所 示 。 


Developer Tools - ECMAScript in 15-days - http://localhost:63342/WebstormProjects, 
CR 人 DInspec 加 Cons D Debug {} StyleEd @& Perform: 大 Mem 三 Netw 时 Stors 轩 " 园 目 窗 口 可 





Sources Outline I cho1-es-debug.js x 


localhost:53342 * Created by KING on 2618761/18. 


WebstormProjects/es-15day: 4 var v id div count = document .getELlenentById("id-div-count"); 
5 Yar strLine; 
6 for(Vvar i=]; i<=10; i++) { 












strLine = "i=" + i,.toString[) + “<br>”; 
区 》 console-leg(striine)? ~ 
9 v_ lid div count .InnerHTML += strLine; 
"| 10 } 
资 ; \ 口 N 
流窜 民 脚本 代码 窗口 
{} © 
人 曾 时 Filter output | Persist Logs 
i=l<br> chgl-es-debug.js:8:5 
i=2<br> chOl-es-debug.js:8:5 
i=3<br> chOl-es-debug.is:8:5 
i=4<br> chOl-es-debug.js:8:5 


i=5<br> 二 调试 信息 输出 窗口 chgl-es-debug.js:;8:5 


i=6<br> chOl-es-debug.ijs:8:5 
i=7<br> chOl-es-debug.ijs:8:5 
i=8<br> cho9l-es-debug.js:8:5 
i=9<br> cho9l-es-debug.js:8;:5 
li=19<br> chol-es-debug.js;8:5 


1.17 打开 Firefox 浏览 器 脚本 代码 调试 功能 面板 


如 图 1.17 中 的 箭头 所 指 ， 在 脚本 源 代 码 窗口 中 为 【代码 1-9】 的 第 05 行 脚本 语句 设置 断 点 ， 
如 图 1.18 所 示 。 


Developer Tools - ECMAScript in 15-days - http://localhost:63342/WebstormProjects/ 
展 峡 Inspec 加 Cons D Debug {} Style Ed @@ Perform: 非 Mem 三 Netw 虽 sStors 田 " 园 日 窗口 了 可 





Sources Outline 四 cho1-es-debug.js x 
/* 说 
localhost:63342 + Created by KING on 2018/91/18. 
*/ 
WebstormProjects/es-15day: 4 var Vv id div count = document .getElementById("id-div-count"); 
Ac H 5 Var strLine; 
ch01-es debug.js 6 for(var i=]; i<=10; i++) { 
strLine = "i=" + i.toString() + "<br>"; 
Add breakpoint 
Add conditional breakpoint 


加 


曾 时 Filter output Persist Logs 


i=l<br> chel-es-debug.js:8:5 
i=2<br> chel-es-debug.ijs:8:5 
i=3<br> chel-es-debug.js:8:5 
i=4<br> ch6l-es-debug.is:8:5 
i=5<br> chel-es-debug.js:8:5 
i=6<br> chbl-es-debug,is:8:5 
i=7<br> chel-es-debug.js:8:5 
i=8<br> chel-es-debug.js:8:5 
i=9<br> chel-es-debug.js:8:5 
i~10<br> chel-es-debug.js:8;:5 





1.18 使 用 Firefox 浏览 器 为 脚本 代码 设置 断 点 
按 FS 功能 键 刷 新 页 面 ， 再 按 F11 功能 键 调试 执行 脚本 代码 ， 页 面 效果 如 图 1.19 和 图 1.20 所 


示 。 

在 图 1.19 和 图 1.20 中 可 以 看 到 ， 每 次 执行 到 【代码 1-9】 中 第 05 行 脚本 语句 设置 断 点 处 时 ， 
脚本 代码 均 会 被 中 断 ， 然 后 在 日 志 窗 口中 输出 调试 信息 (变量 i 计数 器 的 数值 )。 以 上 就 是 
ECMAScript 脚本 代码 开发 与 调试 的 基本 过 程 。 
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Developer Tools - ECMAScript in 15-days - http://localhost:63342/WebstormProjects/ 
[a {0 Inspec Cons D Debug {} StyleEd @& Perform: 自 Mem' 三 Netw 吕 5torz 加 " 园 上 日 窗口 可 


Sources Outline 四 choi-es-debug.js x 


1 
localhost:63342 + Created by KING on 2018/91/18. 
*/ 


WebstormProjects/es-15day: 4 var v id div count = document.getElenentById("id-div-count"); 
CTR! 
6 for(var i=1; ic=10; 1+){ 





7 strLine = "i=" + i.toString() + "<br>"; 
console. log(strLine);| 
9 v_ id div count.innerHTHL += strLine; 
19 } 
{} © 加 
谷 时 Filter output _] Persist Logs 
i=l<br> chQl-es-debug.js:8:5 


N_i 


调试 信息 输出 


1.19 使 用 Firefox 浏览 器 调试 脚本 代码 (1) 


Developer Tools - http://localhost:63342/WebstormProjects/es-15days/ch01/ch01-es 
[ 人 DInspec 园 Cons D Debugo {} StyleEd 多 Perform: 非 Mem 三 Netw 电 Stora 加 " 团 上 日 罕 口 可 





Sources Outline 四 choi-es-debug.js x 


localhost:63342 * Created by KING on 2018/01/18. 


WebstormProjects/es-15day: 4 var v id div count = document .getElenentById("id-div-count"); 
5 var strLine; 
6 for(var i=]; i<=10; i++) { 
7 strLine = "i=" + i.toString() + "<br>"; 

EE console. log(strLine);| _ 

9 v_id div count.innerHTHL += strLine; 

8 } 











{} © 回 


谷 时 Filter output _] Persist Logs 


i=l<br> chOl-es-debug.js:8:5 
i=2<br> ch9l-es-debug.js:8:5 
i=3<br> chOl-es-debug.ijs:8:5 
i=4<br> chOl-es-debug.ijs:8:5 
i=5<br> chOl-es-debug.js:8:5 
i=6<br> chOl-es-debug.is:8:5 
i=7<br> chOl-es-debug.js:8:5 
i=8<br> chOl-es-debug.is:8:5 


1.20 使 用 Firefox 浏览 器 调试 脚本 代码 (2) 
-Bt 
1.5 ”本 任 小 结 


本 章 主要 介绍 了 了 ECMAScript 脚本 语言 的 基础 知识 , 包括 ECMAScript 的 基本 概念 、 发 展 历史 、 
版 本 更 迭 、 组 成 部 分 等 ， 以 及 ECMAScript 脚本 代码 的 运行 机 制 、 编 辑 和 调试 方法 等 ， 且 每 个 重要 
的 知识 点 均 通过 具体 的 代码 实例 进行 了 讲解 。 希望 本 章 内 容 能 为 读者 深入 学 习 ECMAScript 技术 做 
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ECMAScript 语法 


学 习 一 门 编程 语言 ， 首 先 要 掌握 的 就 是 该 编程 语言 的 语法 基础 。 从 本 章 开 始 ， 我 们 将 对 
ECMAScript 语法 进行 系统 全 面 的 介绍 。 


2.1 ECMAScript 语法 规范 


学 习 ECMAScript 语法 主要 依据 的 是 Ecma 国际 的 标准 规范 (ECMA-262) ， 在 该 规范 中 详尽 
地 定义 了 ECMAScript 的 所 有 语法 。 


2.1.1 ECMAScript 语句 


其 实 ， 编 程 就 如 同 写 作 一 样 ， 只 不 过 更 强调 逻辑 性 、 严 谨 性 和 技巧 性 。 我 们 写 一 篇 文章 就 是 
通过 一 句 句 的 内 容 表 述 来 完成 表达 ， 编 写 软件 程序 同样 要 通过 一 条 条 的 程序 语句 来 实现 代码 功能 。 
因此 ， 对 于 学 习 ECMAScript 脚本 语言 来 说 ， 首 先 要 掌握 的 一 个 基本 概念 就 是 ECMAScript 语句 。 
那么 ECMAScript 语句 是 如 何 定义 的 呢 ? 

通常 ,一 条 ECMAScript 语句 用 于 摘 述 一 个 完整 的 变量 定义 或 功能 操作 , 且 每 一 条 ECMAScript 
语句 要 以 分 号 〈;) 结束 ， 分 号 〈;) 是 用 来 分 割 各 条 ECMAScript 语句 的 关键 字符 。 

对 于 C、C++ 或 Java 这 类 的 编程 语言 ， 语 法 规定 也 是 使 用 分 号 〈;) 表示 一 条 语句 。 不 过 也 有 
另类 ， 当 前 红 透 半边 天 的 Python 语言 却 是 强制 不 使 用 任何 结束 符号 来 表示 一 条 语 名 的。 其实， 无 
论语 法 如 何 规定 并 无 高 低 好 坏 之 分 ， 仅 仅 是 语法 风格 不 同 嫌 了 。 当 然 ，ECMAScript 语句 使 用 分 号 
(;) 来 结束 ， 自 然 就 可 以 实现 在 一 行 中 编写 多 条 ECMAScript 语句 (不 建议 使 用 ， 有 可 能 会 影响 
代码 的 阅读 ) ， 这 一 点 Python 语言 肯定 是 无 法 实现 的 。 

ECMAScript 语法 规范 也 算是 比较 另类 的 。 在 ECMA-262 标准 规范 中 ， 规 定 了 使 用 分 号 〈;) 
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来 结束 一 条 语句 并 不 是 强制 的 (可 选 的 ) 。 如 果 没 有 使 用 分 号 (;) 结束 一 条 语句 ,那么 ECMAScript 
语法 规范 会 将 每 行 代码 结尾 处 的 换行 作为 一 条 语句 的 结束 ， 不 过 前 提 是 没有 破坏 一 条 ECMAScript 
语句 的 完整 功能 。 因 此 ， 为 了 避免 发 生 不 必要 的 歧义 ， 建 议 还 是 老 老 实 实 地 写 上 分 号 〈;) 作为 
ECMAScript 语句 的 结束 ， 这 样 可 以 有 效 地 保证 代码 的 可 阅读 性 。 当 然 ， 如 果 将 来 你 在 阅读 某 些 代 
码 资料 时 看 到 没有 分 号 〈;) 结束 的 ECMAScript 语句 ， 千 万 不 要 大 惊 小 怪 ， 这 也 是 符合 ECMA-262 
标准 规范 的 。 


2.1.2 ECMAScript 大 小 写字 母 敏感 

ECMAScript 语法 规范 中 规定 对 代码 中 的 大 小 写字 母 是 敏感 的 ,也 就 是 区 分 大 小 写字 母 ( 与 Java 
语法 保持 一 致 ); 。ECMAScript 语法 规范 中 规定 区 分 大 小 写字 母 的 适用 范围 包括 变量 、 销 数 名 、 运 
算 和 从 及 其 他 一 切 代 码 。 


例如 , 变量 id 与 变量 Id 是 两 个 不 同 的 变量 , 是 绝对 不 能 等 同 的 ; 同 理 , 图 数 名 getElementById() 
与 图 数 名 getElementbyID0O 也 是 不 同 的 ， 写 成 函数 名 getElementbyID(O 则 不 是 有 效 的 系统 函数 。 


2.1.3 ECMAScript 代码 空格 


ECMAScript 语法 规范 中 规定 目 动 忽略 代码 中 多 余 的 空格 。 依 据 这 个 特点 ， 可 以 通过 添加 空格 
对 脚本 代码 进行 排版 ， 达 到 提高 代码 可 阅读 性 的 目的 。 


2.1.4 ECMAScript 代码 强制 换行 
ECMAScript 语法 规范 中 规定 可 以 在 文本 字符 串 中 使 用 反 斜 枉 〈\) 对 代码 行进 行 强制 换行 。 例 
如 ， 下 面 的 代码 惑 是 可 以 被 正确 解析 的 。 


document .write ("Hello \ 
ECMAScript!"); 


需要 注意 的 是 ， 代 码 强制 换行 上 只 限于 在 文本 字符 串 中 。 如 果 将 上 面 的 代码 改写 成 下 面 的 形式 ， 
那么 代码 是 无 法 被 正确 解析 的 。 


document .write \ 


("Hello ECMAScript!"); // 这 条 语句 是 错误 的 


2.1.5 “ECMAScript 代码 注释 

ECMAScript 代码 注释 分 为 单行 注释 和 多 行 注释 , 被 注释 的 ECMAScript 代码 是 不 会 被 执行 的 。 
具体 说 明 如 下 : 

1. ECMAScript 代码 单行 注释 

单行 注释 以 字符 串 “/” 开 头 ， 例 如 : 


document .write ("Hello ECMAScript!");  // 向 浏览 器 中 输出 字符 串 "Hel1lo ECMAScript!" 
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2. ECMAScript 代码 多 行 注 释 
多 行 注释 以 字符 串 “/*” 开 头 并 以 字符 串 “* ”结束 ， 例 如 : 


/* 

* 通过 document .write () 方 法 

* 问 浏览 器 中 输出 字符 串 "Hello ECMAScript!" 
sd 

document .write ("Hello ECMAScript!"); 


2.1.6 ECMAScript 代码 块 


代码 块 这 个 概念 源 自 于 Java 语言 ，ECMAScript 语法 规范 中 的 代码 块 也 基本 上 借鉴 了 Java 语 
言 。ECMAScript 代码 块 用 于 定义 一 组 按 顺序 执行 的 语句 ， 且 全 部 语句 被 封装 在 大 括号 (f}) 内 。 
具体 代码 示例 如 下 : 

while(1) { 

// TODO: ECMAScript code. 

} 

在 上 和 面 这 段 代 码 中 ， 大 插 写 ({f})〉 内 的 全 部 代码 可 以 称 为 一 个 代码 块 。 

ECMAScript 代码 块 是 一 个 非常 有 用 的 概念 ， 我们 在 后 和 面 介绍 关于 变量 作用 域 的 概念 时 可 体会 
到 其 用 途 。 


2.2 ” ECMAScript 变量 


本 节 将 介绍 ECMAScript 变量 的 相关 知识 ， 从 现在 就 真正 进入 到 ECMAScript 语法 的 实际 应 用 
部 分 了 。 


2.2.1 ” 弱 类 型 的 ECMAScript 变量 


变量 variable 是 计算 机 高 级 编程 语言 中 非常 重要 的 概念 之 一 。 一般 意义 上 , 我 们 将 “变量 ” 理 
解 为 计算 机 程序 中 用 于 存储 数据 信息 的 容器 ， 也 可 以 理解 为 用 于 符 代 数据 信息 的 符号 。 

ECMAScript 语法 规范 中 定义 的 “变量 ” 既 可 以 存储 数据 信息 ， 也 可 以 定义 为 奉 代 表达 式 的 符 
号 。ECMAScript 变量 一 般 都 是 通过 var 关键 字 定 义 的 ， 而 且 定 义 的 都 是 无 特定 类 型 (也 叫 弱 类 型 ) 
的 变量 。 因 为 是 弱 类 型 ， 所 以 定义 好 的 ECMAScript 变量 可 以 初始 化 为 任意 类 型 的 值 ， 同 时 可 以 随 
时 改变 变量 的 数据 类 型 。 这 就 是 弱 类 型 变量 的 特点 ， 完 全 不 同 于 强 类 型 变量 (C 语言 和 Java 语言 
的 变量 ) 。 强 类 型 变量 在 定义 时 就 固定 好 了 数据 类 型 (如 整 型 、 浮 点 型 、 字 符 串 型 等 ) 。 

当然 , 一 般 不 建议 任意 改变 ECMAScript 变量 的 数据 类 型 ,初始 化 定义 成 什么 类 型 最 好 就 一 直 
沿用 该 类 型 。 因 为 在 大 型 ECMAScript 代码 应 用 中 ， 随 意 改变 变量 类 型 对 于 管理 、 调 试 代码 来 说 是 
非常 月 误 的， 一 旦 出 钳 就 很 难 找到 出 钳 的 地 方 。 
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2.2.2 声明 ECMAScript 变量 


ECMAScript 语法 规范 中 规定 一 般 通 过 var (变量 variable 的 缩写 ) 关键 字 来 声明 定义 变量 ， 当 
然 也 可 以 直接 声明 定义 变量 。 通 常 ， 使 用 var 关键 字 声 明定 义 的 是 局 部 变量 ， 不 使 用 var 关键 字 声 
明定 义 的 是 全 局 变量 。 

此 外 ， 在 ECMAScript 语法 规范 中 还 规定 了 一 些 关 于 声明 定义 变量 的 准则 ， 具 体内 容 如 下 : 

e 。 ECMAScript 变量 需要 以 字母 开头 ， 大 小 写字 母 均 可 ， 且 对 大 小 写字 母 敏 感 (如 a 和 A 是 不 

同 的 变量 ) 。 

e ECMAScript 变量 也 可 以 用 “$” 或 “ ”符号 开头 。 

ECMAScript 变量 分 为 全 局 变量 和 局 部 变量 , 且 二 者 的 定义 方式 、 作 用 域 及 用 法 有 明显 的 区 别 。 

下 面 是 一 个 使 用 var 关键 字 声 明定 义 ECMAScript 变量 的 代码 示例 〈 详 见 源 代码 ch02 目录 中 
的 ch02-es-var.html 文件 ) 。 





【代码 2-1】 

01 <script type="text/javascript"> 
02 Var 1 = | 

03 var j] = 2; 

04 var SUnm = 

QS Var str = "Summary = "; 

06 console.log(str + sum); 


en eal oh ce 


关于 【代码 2-1】 的 分 析 如 下 : 

第 02 一 03 行 代码 通过 var 关键 字 分 别 定义 了 两 个 变量 1 和 j, 并 进行 了 初始 化 赋值 操作 。 注 意 ， 
这 里 初始 化 的 值 均 是 整数 类 型 ， 因 为 ECMAScript 变量 弱 类 型 的 特点 ， 所 以 解释 程序 会 自动 为 变量 
创建 整数 类 型 值 。 

第 04 行 代码 通过 var 关键 字 定 义 了 一 个 变量 表达 式 (var sum = i+j;) ， 表 达 式 中 的 变量 1 和 
j 正 是 第 02 一 03 行 代码 中 定义 的 ， 而 表达 式 运 算 的 结果 会 保存 在 变量 sum 中 。 

第 05 行 代码 通过 var 关键 字 定 义 了 一 个 变量 sr， 并 进行 了 初始 化 赋值 操作 。 不 过 这 里 初始 化 的 
值 是 字符 串 类 型 ， 根 据 ECMAScript 变量 弱 类 型 的 特点 ， 解 释 程序 会 目 动 为 变量 创建 字符 串 类 型 值 。 

第 06 行 代 码 通过 console.log0 图 数 问 浏览 器 控制 台 输 出 调试 信息 《字符 串 变 量 str 的 内 容 和 表 
达 式 变量 sum 的 运算 结果 ) 。 

运行 【代码 2-1】 所 指定 的 HTML 页 面 ， 并 使 用 浏览 器 控制 台 碍 看 调试 信息 ， 页 面 效 果 如 图 
2.1 所 示 。 在 浏览 器 控制 台中 输出 了 【代码 2-1】 中 第 06 行 脚 本 代码 所 定义 的 调试 信息 。 

[a Inspe Cons Deb' Style Perf Mem Nety St 回 - 园 日 闻 日 加 


曾 是 Filter output [_ | Persist Logs 
Summary = 3 chO2-es-var.html:27:9 


POD 


Besaannnnnsennnnnnnnannnnnenasannnnnnseennnnnnnseannnnnnaennnnnnannnnnanannnnnnnnes 


2.1 声明 定义 ECMAScript 变量 
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2.2.3 ”ECMAScript 变量 命名 习惯 


2.2.2 小 节 介 绍 了 如 何 声明 定义 ECMAScript 变量 , 本 小 节 专 门 介绍 ECMAScript 变量 命名 的 习 
惯 。 在 软件 编程 业内 有 许多 关于 变量 命名 的 习惯 ， 比 较 闭 名 的 有 Camel 标记 法 〈 小 写字 母 开头 ) 、 
Pascal 标记 法 (大 写字 母 开 头 ) 和 匈牙利 类 型 标记 法 《基本 集合 了 前 两 者 的 优点 ) 。 

匈牙利 类 型 标记 法 是 由 微软 公司 的 匈牙利 籍 程序 员 (Charles Simonyi) 首先 发 明 出 来 并 应 用 到 
实际 开发 中 的 。 为 了 纪念 这 名 具有 传奇 色彩 的 程序 员 ， 该 标记 法 就 以 Charles Simonyi 本 人 的 名 字 
而 命名 了 。 关 于 Charles Simonyi 本 人 ， 用 “传奇 ”来 形容 其 在 软件 开发 领域 的 功绩 是 一 点 也 不 从 
张 的 ， 感 兴趣 的 读者 可 以 去 互联 网 上 搜索 一 下 。 

匈牙利 类 型 标记 法 具体 如 何 定 义 呢 ? 概 插 来 说 ， 研 是 变量 名 由 该 变量 所 代表 数据 类 型 的 小 写字 母 
缩写 开始 ， 后 面 由 该 变量 代表 的 具体 含义 的 单词 〈 首 字母 大 写 ， 可 为 缩写 ) 完成 。 同 时 ， 匈 牙 利 类 型 
标记 法 约定 了 代表 数据 类 型 的 小 写字 母 缩写 ，ECMAScript 语法 约定 的 匈牙利 类 型 标记 法 见 表 2.1。 


表 2.1 匈牙利 类 型 标记 法 (ECMAScript) 


加 型 (数字 ) vee 
Value 

字符 和 se 
ay 
布尔 型 |pBooem 
对 象 |o loobject 
列 数 Method | 
jE 则 表态 |e jpatm | 








对 于 和 印 牙 利 类 型 标记 法 在 有 具体 实践 中 是 比较 灵活 的 ， 读 者 能 掌握 其 总 体 原则 、 领 会 其 精 要 、 
灵活 运用 即 可 。 





2.2.4 动态 改变 ECMAScript 变量 类 型 


在 前 面 介 绍 了 ECMAScript 变量 弱 类 型 的 特点 ， 也 就 是 ECMAScript 语法 规范 允许 在 编程 中 动 
态 改变 ECMAScript 变量 的 数据 类 型 。 简 单 来 说 ， 就 是 初始 化 一 个 ECMAScript 变量 时 为 一 种 数据 
类 型 ， 后 面 编程 中 还 可 以 随时 改变 该 变量 的 数据 类 型 。 这 点 是 完全 不 同 于 强 类 型 变量 编程 语言 的 ， 
但 也 恰恰 体现 了 ECMAScript 脚本 语言 的 灵活 性 。 
下 面 是 一 个 改变 ECMAScript 变量 数据 类 型 的 代码 示例 〈 详 见 源 代 码 ch02 目录 中 的 
ch02-es-var-dyn-revise.html 文件 ) 。 
【代码 2-2 】 


01 <script type="text/javascript"> 


24 


第 2 章 “ECMAScript 语法 


02 var i = 88, str = "ECMAScript"; 
oonsole lot "Py 

Va congsoLle Loo(r ste  : "gtehs 

与 1 = tr 

Ue Str = 88: 

UT onsolelool Tie Te 

Br coonsole loql str eT" gtr) 
09</secript> 


关于 【代码 2-2】 的 分 析 如 下 : 

第 02 行 代码 通过 var 关键 字 在 一 行内 分 别 定义 了 两 个 变量 1 和 str， 变 量 i 初始 化 赋值 为 整数 
类 型 ， 变 量 str 初始 化 为 字符 串 类 型 。 

第 05 行 代码 通过 表达 式 将 变量 str 的 数据 内 容 赋 给 了 变量 i; 第 06 行 代码 将 变量 str 的 内 容重 
新 赋值 为 整 型 值 88。 注 意 ， 这 里 的 数据 类 型 不 是 一 致 的 ， 如 果 是 强 类 型 变量 的 编程 语言 (C 语言 
或 Java 语言 ) ， 就 肯定 会 报错 ， 但 是 ，ECMAScript 语法 规范 却 是 允许 的 ， 读 者 看 到 后 面 的 调试 结 
果 就 会 明白 。 

运行 页 面 ， 调 试 信息 如 图 2.2 所 示 。 从 浏览 器 控制 台中 输出 的 调试 信息 可 以 看 到 ， 变 量 1 和 变 
量 str 在 动态 改变 了 数据 类 型 后 并 没有 出 现 报错 问题 ， 完 全 可 以 进行 正确 的 输出 。 这 就 是 
ECMAScript 变量 弱 类 型 的 特点 。 


Developer Tools - ECMAScript in 15-days - http://loca 
[a Inspe' Cons Debur Style E Perforn Mem Netw Stor: "于 目 羽 口 了 可 





人 曾 时 Filter output |_ | Persist Logs 
i : 88 “Var-dyn-revise.html:24:3 
str : ECMAScript “~Var-dyn-revise.html:25:3 
i = ECMAScript “~Var-dyn-revise.html :28:3 
str = 88 “~Var-dyn-revise.html:29:3 


TT 


2.2 ”动态 改变 ECMAScript 变量 数据 类 型 


2.2.5 ”未 声明 的 ECMAScript 变量 


ECMAScript 语法 规范 中 还 规定 可 以 不 通过 var 关键 字 直 接 声 明定 义 变 量 ， 这 一 点 与 其 他 程序 
设计 语言 还 是 有 区 别 的 。 前面 我 们 也 提 到 了 ， 对 于 未 使 用 var 关键 字 声 明定 义 的 变量 一 般 都 是 全 局 
变量 。 关 于 全 局 变量 与 局 部 变量 的 内 容 会 在 后 面 专门 进行 介绍 。 

下 面 是 一 个 未 声明 的 ECMAScript 变量 的 代码 示例 〈 详 见 源 代码 ch02 目录 中 的 ch02-es-no- 
var.html 文件 ) 。 





【代码 2-3】 

01 <script type="text/javascript"> 

02 Var SVar = "ECMAScript variable"; 
03 econsole logl Svar ee TT evarhs 

04 sNoVar = sVar + " with no var"; 

05 console., Log ("SNoVar »" TT SNoVvar}s 


O06 </script> 


关于 【代码 2-3】 的 分 析 如 下 : 
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第 02 和 第 03 行 代 码 通过 var 关键 字 定 义 了 一 个 变量 sSVar， 并 进行 了 初始 化 赋值 操作 。 

第 04 行 代码 未 通过 var 关键 字 进 行 声明 ， 而 是 直接 定义 了 一 个 变量 sSNoVar,， 并 通过 变量 sVar 
连接 字符 串 的 方式 对 其 进行 了 初始 化 赋值 操作 。 

运行 页 面 ， 调 试 信息 如 图 2.3 所 示 。 





Developer Tools - ECMAScript in 15-days - http://localho 


[a Inspec Cons Debug Style Ec Perform Mem Netw Stora 轩 " 轩 上 日 窜 日 了 


做 宇 Filter output | Persist Logs 
sVar : ECMAScript variable ch02-es-no-var.html:24:3 
sNoVar : ECMAScript variable with no Var ch02-es-no-var.html :26:3 





2.3 ”未 声明 定义 的 ECMAScript 变量 


如 图 2.3 中 第 尖 所 指 【 代 码 2-3] 中 第 04 行 脚本 代码 未 使 用 var 关键 字 声 明定 义 的 变量 SNoVar 
同样 是 可 以 进行 赋值 操作 的 。 

这 里 需要 特别 说 明 一 下 ， 虽 然 ECMAScript 语法 规范 允许 不 使 用 var 关键 字 声 明定 义 变量 , 但 
这 样 做 会 带 来 一 定 的 危险 性 。 在 ECMAScript 脚本 代码 体 量 非常 大 的 场景 下 ， 有 可 能 会 对 这 类 未 声 
明 的 变量 失去 监管 ， 并 产生 意 想不到 的 严重 后 果 。 因 此 ， 建 议 设计 人 员 还 是 保持 恨 好 的 编程 习惯 ， 
除非 在 有 特殊 需要 的 情况 下 ， 奋 则 一 定 要 按照 规范 严格 声明 定义 所 有 的 变量 。 


2.2.6 ”严格 模式 


在 2.2.5 小 节 中 详细 介绍 了 不 使 用 var 关键 字 声 明定 义 变量 的 情况 ， 也 建议 设计 人 员 最 好 声明 
定义 每 一 个 变量 。 因 此 ， 从 ECMAScript 5 语法 规范 开始 ， 增 加 了 一 个 严格 模式 (use strict) ， 用 
来 强制 设计 人 员 通 过 var 关键 字 声 明定 义 变 量 ， 否则 调试 运行 时 就 会 报错 。 

需要 说 明 一 下 ， 严 格 模 式 (use strict) 并 不 是 一 个 运算 符 ， 仅 仅 是 一 个 字面 量 。 严 格 模式 (use 
strict) 并 非 强 制 使 用 ， 但 强烈 建议 使 用 。 使 用 时 ，“use strict” 字 面 量 一 定 要 放置 在 所 有 脚本 代码 
的 最 顶端， 但 如 果 是 仅仅 针对 一 个 代码 段 内 的 代码 ， 就 要 放置 在 该 代码 段 的 最 顶端 位 置 。 

下 面 是 一 个 使 用 严格 模式 (use strict) 的 ECMAScript 代码 示例 〈 详 见 源 代 码 ch02 目录 中 的 
ch02-es-var-use-strict.html 文件 ) ， 这 段 代 码 是 在 【代码 2-3】 的 基础 上 稍 作 修改 而 成 的 。 

【代码 2-4】 


01 <script type="text/javascript"> 


02 vuse Strietrs 

03 Var SVar = "ECMAScript Variable"; 
04 console, Log(TSsVar 7 SVar)s 

05 sNoVar = SVar + " with no var"; 

06 console.log("sNoVar : " + sNoVar); 


QO /> 


关于 【代码 2-4】 的 分 析 如 下 : 

代码 【代码 2-4】 与 【代码 2-3】 的 唯一 区 别 就 是 在 第 02 行 代码 〈ECMAScript 脚本 代码 的 最 
顶端 ) 定义 了 严格 模式 (use strict) 字面 量 。 

运行 页 面 ， 调 试 信息 如 图 2.4 所 示 。 如 图 2.4 中 箭头 所 指 ，【 代码 2-4】 第 05 行 代码 中 未 使 用 
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var 关键 字 声 明定 义 的 变量 SNoVar， 被 浏览 器 报错 了 (undeclared variable， 未 声明 的 变量 ) 。 这 个 
结果 与 【代码 2-3】 运 行 结 果 是 完全 不 同 的 〈 见 图 2.3) 。 





Developer Tools - Ecmascript in 15-days - http://localhost:6334 


a Inspect Conso Debugc Style Edi Performal Memo Netwo Storac 回 * 园 日 闻 日 加 


灾 Filter output | Persist Logs 
sVar : EcmaScript Variable -eS5-Var-Use-strict.html:25:9 
AP ReferenceError: assignment to undeclared -es-Var-Use-strict.htmt:26:9 


variable sNoVar [Learn More] 


TTT 





“i———— 


2.4 ”严格 模式 (use strict) 


严格 模式 (use strict) 对 于 编写 ECMAScript 脚本 代码 来 说 非常 有 用 ， 可 以 有 效 地 避免 对 未 声 
明 变 量 的 使 用 。 建 议 设 计 人 员 在 使 用 变量 前 必须 先 声 明定 义 该 变量 ， 这 也 是 一 个 展 好 的 编程 习惯 。 


2.3 let 关键 字 


在 ECMAScript 6 版 本 语法 规范 中 ， 对 于 变量 的 声明 定义 新 增 了 一 个 let 关键 字 。 可 能 有 些 读 
者 会 有 疑问 ，var 关键 字 不 是 完全 可 以 满足 声明 定义 变量 的 需求 么 ? 读者 耐心 学 习 完 本 节 的 内 容 ， 
应 该 就 能 体会 到 ECMAScript 6 版 本 语法 规范 中 新 增 该 功能 的 妙 处 了 。 


2.3.1 ”变量 作用 域 


前 面 介 绍 了 不 通过 var 关键 字 声 明 变 量 的 使 用 方法 。 其 实 ， 使 用 或 不 使 用 var 关键 字 还 有 一 个 
很 常见 的 问题 ， 那 就 是 变量 的 作用 域 。 

下 面 是 一 个 ECMAScript 变量 作用 域 的 代码 示例 〈 详 见 源 代 码 ch02 目录 中 的 ch02-es-var- 
scope.html 文件 ) 。 


【代码 2-5】 

01 <script type="text/javascript"> 

02 var i = 1; // TODO: 声明 定义 变量 i 
03 console.log("i = " + i); 

04 /* 

05 * 声明 定义 函数 : func i() 

06 sa 

07 FOnceron eoneei(e dl 

08 i = 2; // TODO: 尝试 修改 变量 i 的 值 
09 L 

10 func i(); // TODO: 调用 函数 func_i() 
hu console.log ("i = " + 1i); 

1 var j = 1; // TODO: 声明 定义 变量 j 
3 console.log("j = " + j); 

14 /* 

15 * 声明 定义 函数 : func j() 

16 Wd 
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1 function func 3() 1 


18 var j = 2; // TODO: 重新 声明 定义 变量 j 
19 } 

20 1 // TODO: 调用 函数 func j() 
2 console .log("j = " + j); 


220 </acript> 

关于 【代码 2-5】 的 分 析 如 下 : 

第 02 行 代码 通过 var 关键 字 定 义 了 第 一 个 变量 1i， 并 进行 了 初始 化 赋值 操作 二 1。 第 07 一 09 
行 代 码 定义 了 一 个 函数 方法 fnc iD。 其中， 第 08 行 代码 尝试 重新 对 变量 i 进行 赋值 操作 i=2。 

第 10 行 代码 对 第 07 一 09 行 代 码 定义 的 函数 方法 func_i0 进 行 了 调用 。 

第 12 一 21 行 代 码 与 第 02 一 11 行 代 码 的 写法 类 似 ， 定 义 了 第 二 个 变量 j; 唯一 不 同 的 地 方 就 是 
第 18 行 代码 ， 使 用 var 关键 字 重 新 声明 定义 了 变量 j。 

运行 页 面 ， 调 试 信息 如 图 2.5 所 示 。 


Developer Tools - EcmaScript in 15-days - http://localhost 


[a Inspec Cons' Debug Style Ed Perform Memr Netw' Stora 回 - 园 上 日 字 日 口 


会 时 Filter output | Persist Logs 
i= 1 ch02-es-var-scope.html:24:3 
i=2 < chg2-es-var-scope.html:32:9 
j= 1 ch02-es-var-scope.html :34:9 
j= 1 和 ch02-es-var-scope.html:42:9 


Bonneneeenseneennenneenseneeenenneeneeeneneenneeneeneeneneenenneeneneeneennenneeneennneneneeneennen0n enn 


图 2.5 ECMAScript 变量 作用 域 
如 图 2.5 中 箭头 所 指 ，【 人 代码 2-5】 中 第 08 行 代码 对 第 一 个 变量 i 的 修改 操作 成 功 了 ， 变 量 i 
的 值 从 1 变 成 了 2。 第 18 行 代码 对 第 二 个 变量 j 的 修改 操作 似乎 没 效果 ， 变 量 j 的 值 依旧 为 1， 这 
是 什么 原因 了 呢 ? 
因为 在 第 18 行 代码 中 使 用 var 关键 字 重 新 声明 定义 了 变量 j, 此 时 的 变量 j 仅仅 是 局 部 变量 (只 
在 函数 方法 fanc_j0 中 有 效 ) ， 也 就 是 说 第 18 行 代码 定义 的 变量 j 与 第 12 行 代码 定义 的 变量 j 是 
完全 不 相关 的 两 个 变量 ， 虽 然 变 量 名 称 相同 ， 但 作用 域 却 完全 不 同 。 
【代码 2-5】 就 是 对 变量 作用 域 的 一 个 简单 测试 ， 下 面 进一步 介绍 ECMAScript 语法 规范 中 变 
量 提升 的 内 容 。 


2.3.2 ”变量 提升 


在 ECMAScript 语法 规范 中 ， 变 量 提升 是 一 个 很 常见 的 情况 。 那 么 ，ECMAScript 变量 提升 具 
是 一 个 什么 概念 呢 ? 
看 一 下 ECMAScript 变量 提升 的 简单 测试 代码 ( 详 见 源 代码 ch02 目录 中 的 ch02-es-var-enhance. 
html 文件 ) 。 


【代码 2-6】 

01 <script type="text/javascript"> 
02 console.log ("i = " + i); 

03 Var i = 1; 
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04 Console .log("ri = " + i); 
05 < /gCript> 


关于 【代码 2-6】 的 分 析 如 下 : 

第 03 行 代码 通过 var 关键 字 声 明定 义 了 一 个 变量 i， 并 进行 了 初始 化 赋值 操作 二 1。 

第 02 行 和 第 04 行 代码 分 别 在 声明 定义 变量 i 之 前 和 之 后 , 尝试 在 浏览 器 控制 台 窗口 中 输出 了 
变量 i 的 内 容 。 

运行 页 面 ， 调 试 信息 如 图 2.6 所 示 。 如 图 2.6 中 箭头 所 指 ， 虽 然 执 行 【 代 码 2-6】 中 的 第 02 行 
代码 看 似 会 被 报错 ， 但 实际 却 输 出 了 变量 未 定义 (undefined) 的 内 容 。 这 是 为 什么 呢 ? 





Developer Tools - ECMAScript in 15-days - http://localhost:633 


Inspect Conso Debugc Style Edi Performa Memo Netwo Storac 轩 ~" 园 目 窜 日 可 


兽 时 Filter output _ | Persist Logs 
i = undefined 一 一 ch62-es-Vvar-enhance .htmtL:23:9 
i= 1 ch02-es-var-enhance.html:25:9 


2.6 ECMAScript 变量 提升 


主要 是 因为 ECMAScript 变量 提升 的 特性 才 会 产生 这 样 的 结果 。 在 ECMAScript 脚本 代码 编译 
过 程 中 ， 会 将 全 部 变量 提升 到 该 变量 作用 域 的 最 项 部 。 现 在 我 们 返回 到 【代码 2-6】 中 ， 根 据 变量 
提升 的 特性 ， 在 执行 第 02 行 代码 时 变量 i 已 经 存在 了 〈 变 量 提 升 ) ， 只 不 过 此 时 未 被 初始 化 ， 因 
此 才 会 输出 (undefined) 值 。 在 执行 第 04 行 代 码 时 ， 变 量 i 已 经 被 初始 化 了 ， 因 此 会 输出 初始 化 
时 的 数值 1。 


2.3.3 ”全 局 变量 、 局 部 变量 和 块 级 作用 域 


在 ECMAScript 6 语法 规范 之 前 ， 变 量 作用 域 只 有 全 局 作用 域 和 函数 作用 域 ， 是 没有 “ 块 级 作 
用 域 ” 这 个 概念 的 。 因 此 ，ECMAScript 变量 只 有 全 局 变量 和 局 部 变量 之 分 ， 全 局 变量 的 有 效 作 用 
域 就 是 整个 页 面 ， 而 局 部 变量 的 有 效 作 用 域 仅 限制 在 其 所 定义 位 置 的 函数 内 。 

下 面 看 一 个 ECMAScript 全 局 变量 、 局 部 变量 和 块 级 作用 域 的 代码 示例 〈 详 见 源 代码 ch02 目 
录 中 的 ch02-es-var-block.html 文件 ) 。 








【代码 2-7】 

01 <script type="text/javascript"> 

02 var global = 1; // TODO: define global variable 
03 console.log("global variable = " + global); 

04 WW 

05 * 定义 函数 作用 域 

06 i 

07 (function () { 

08 console.log("global variable in func = " + global); 
09 var don 2 

10 [eB 

Bu! 下 人 

1 console.。 log("g =™ 1 go): 
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| i 

14 * 定义 块 级 作用 域 

下 号 EW 

16 { 

I console.log("global variable in block = " + global); 
TB console.log("g variable in block = " + 9g); 
19 Var 11 = 3; 

20 gg = 11; 

2 | 

2 console.log("]l1 = " + 11); 

23 Consoleslog(ngg = " Pogg)s 

24 Console .log("1 = " + 1); 


250 /Script> 


关于 【代码 2-7】 的 分 析 如 下 : 

这 段 脚 本 代码 相对 有 些 复杂 ， 总 体 上 是 为 了 测试 和 验证 函数 作用 域 及 块 级 作用 域 的 概念 。 

第 02 行 代码 定义 了 一 个 全 局 变量 global， 并 初始 化 赋值 为 数值 1; 同时 ， 在 第 03 行 代 码 中 输 
出 了 该 全 局 变量 global 的 内 容 。 

第 07 一 11 行 代码 定义 了 一 个 函数 作用 域 (function ) 。 其 中 ， 第 08 行 代 码 再 次 尝试 输出 全 局 
变量 global 的 内 容 。 

第 09 行 代码 通过 var 关键 字 定 义 第 一 个 局 部 变量 1， 并 初始 化 赋值 为 数值 2。 

第 10 行 代 码 未 通过 var 关键 字 直接 定义 了 第 一 个 变量 g, 并 初始 化 赋值 为 变量 1 的 数值 ; 根据 
前 面 介 绍 过 的 知识 点 ， 该 变量 g 是 一 个 全 局 变量 。 

第 12 行 代码 尝试 输出 变量 g 的 内 容 。 注 意 ， 该 行 代 码 已 经 是 在 第 07 一 11 行 代码 定义 的 函数 
作用 域 (function ) 外 部 了 。 

第 16 一 21 行 代码 定义 了 一 个 块 级 作用 域 (通过 “他 ”符号 实现 ) 。 其 中 ， 第 17 行 代码 第 三 
次 尝试 输出 全 局 变量 global 的 内 容 ; 第 18 行 代码 再 次 尝试 变量 g 的 内 容 ,注意 该 行 代码 在 第 16 一 
21 行 代码 定义 的 块 级 作用 域内 。 

第 19 行 代码 通过 var 关键 字 定 义 了 第 二 个 局 部 变量 ll， 并 初始 化 赋值 为 数值 3。 

第 20 行 代码 未 通过 var 关键 字 直 接 定 义 了 第 二 个 变量 gg， 并 初始 化 赋值 为 变量 1 的 数值 ， 该 
变量 gg 也 是 一 个 全 局 变量 。 

第 22 行 代码 尝试 输出 变量 1 的 内 容 ， 第 23 行 代码 尝试 输出 变量 gg 的 内 容 ， 注 意 这 两 行 代码 
已 经 是 在 第 16 一 21 行 代 码 定义 的 块 级 作用 域外 部 了 。 

比较 特别 的 是 第 24 行 代码 ， 尝 试 输出 了 变量 1 的 内 容 。 为 什么 将 该 行 代码 放 在 最 后 呢 ? 通过 
下 面 的 测试 就 会 明白 了 。 

运行 页 面 ， 调 试 信息 如 图 2.7 所 示 。 

如 图 2.7 所 示 ， 从 浏览 器 控制 台中 输出 的 内 容 来 看 ， 每 次 全 局 变量 global 均 得 到 了 正确 输出 ， 
说 明 全 局 变量 的 作用 域 为 整个 页 面 。 

由 于 变量 g 未 通过 var 关键 字 声 明定 义 ， 虽 然 是 在 函数 作用 域内 定义 的 , 也 相当 于 一 个 全 局 变 
量 ， 因 此 变量 g 无 论 是 在 函数 作用 域外 部 还 是 在 块 级 作用 域内 部 ， 均 得 到 了 正确 输出 。 

变量 gg 的 情况 类 似 于 变量 g， 虽 然 是 在 块 级 作用 域内 定义 的 ， 但 是 也 相当 于 一 个 全 局 变量 。 
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Developer Tools - ECMAScript in 15-days - http://localhost:63342/W 


[a Inspectc Consol Debugg' Style Edit PerfForman Memor Networ Storag 加 7* 园 日 之 口 了 可 


会 时 Filter output |_ | Persist Logs 
global variable = 1 ch02-es-var-block.html:24:9 
global variable in func = 1 ch02-es-var-block.html :29:13 
g=2 ch02-es-var-block.html:33:9 

AP ReferenceError: 1 is not defined [Learn Morel chO2-es-var-block.html:45:9 
global variable in bilock = 1 ch02-es-var-block.html:38:13 
g variable in block = 2 chO2-es-var-block.html :39:13 
LL= 了 3 ch92-es-Vvar-bLock .htmL:43;:9 
gg = 3 chO2-es-var-block.html:44:9 


2.7 ” ECMAScript 全 局 变量 、 局 部 变量 和 块 级 作用 域 


这 里 比较 特殊 的 、 具 有 对 比 性 的 就 是 变量 1 和 变量 1， 变 量 1 通过 var 关键 字 在 函数 作用 域内 
声明 定义 ， 变 量 11 通过 var 关键 字 在 块 级 作用 域内 声明 定义 。 从 测试 结果 来 看 ， 变 量 11 得 到 了 正确 
输出， 而 变量 1 被 提示 报错 为 “变量 未 定义 ”, 由 此 可 以 看 出 函数 作用 域 和 块 级 作用 域 的 主要 区 别 。 
男 外 ， 将 变量 1 的 测试 输出 放 在 全 部 代码 最 后 ， 也 是 为 了 避免 因 调 试 报 错 而 中 断 脚 本 代码 的 运行 。 


2.3.4 let 天 键 字 的 简单 示例 


前 和 面 详细 介绍 了 “ 块 级 作用 域 ” 的 概念 , 为 了 更 好 地 满足 对 “ 块 级 作用 域 ” 的 使 用 , ECMAScript 
6 语法 规范 中 新 增 了 一 个 let 关键 字 ， 用 来 针对 “ 块 级 作用 域 ” 进 行 编程 设计 。 下 面 看 一 个 let 关键 
字 的 简单 代码 示例 〈 详 见 源 代 码 ch02 目录 中 的 ch02-es-let.html 文件 ) 。 


【代码 2-8】 

01 <script type="text/javascript"> 
02 senseeTeEns 

03 i 

04 * 定义 块 级 作用 域 

JU， Eh 

06 { 

gh var vi a | 

08 let 1i = vi; 

09 } 

10 console.log ("vi = "+ vi); 
1 Console .log(rli = "™ + 1i); 


T1200 /SCripe> 


关于 【代码 2-8】 的 分 析 如 下 : 

第 06 一 09 行 代码 定义 了 一 个 块 级 作用 域 (通过 “{}” 符 号 实现 ) 。 其 中 ， 第 07 行 代码 通过 
var 关键 字 声 明定 义 了 第 一 个 变量 vi 的 内 容 ， 并 初始 化 赋值 为 数值 1; 第 08 行 代码 通过 let 关键 字 
声明 定义 了 第 二 个 变量 1 的 内 容 ， 并 初始 化 赋值 为 变量 vi 的 数值 。 

运行 页 面 ， 调 试 信息 如 图 2.8 所 示 。 如 图 2.8 中 箭头 所 指 ， 变 量 vi 的 内 容 得 到 了 正确 输出 ， 而 
变量 li 却 被 提示 为 错误 警告 “变量 未 定义 ”， 这 就 证 明了 通过 let 关键 字 声明 定义 的 变量 1i 的 有 效 
作用 域 仅 仅 存 在 于 第 06 一 09 行 代码 定义 的 “ 块 级 作用 域 ”内 。 
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Developer Tools - ECMAScript in 15-days - http://localhost:63: 


Ca Inspect Consc Debugc Style Edi Performa Memo Netwc Stora 田 " 园 目 窗 日 


闸 是 Filter output | Persist Logs 
vi= 1 chO2-es-let.html:31:9 
Ar ReferenceError: Li is not defined [Learn More] chO2-es-let.html:32:9 





图 2.8 通过 let 关键 字 实 现 块 级 作用 域 


2.3.5 ”let 关键 字 使 用 规则 


既然 let 关键 字 是 ECMAScript 6 语法 规范 中 新 增 的 一 个 特性 ， 那 么 其 在 使 用 规则 上 目 然 会 与 
var 关键 字 有 所 区 别 。 总 体 上 ， 在 使 用 let 关键 字 时 要 避免 出 现 以 下 两 种 错误 情形 : 
e@ 变量 在 未 用 let 关键 字 声 明之 前 就 使 用 会 报错 。 
@ 重复 声明 同一 变量 会 报错 。 
下 面 先 看 第 一 个 关于 let 关键 字 使 用 规则 的 代码 示例 〈 详 见 源 代 码 ch02 目录 中 的 ch02-es-let- 
rules-a.html 文件 ) 。 
【代码 2-9】 


01 <script type="text/javascript"> 


人 0 Ta Sterlite 

03 Wa 

04 * 定义 块 级 作用 域 

05 二 六 

06 { 

07 det 1 = 1: 

08 console.log("i before declare= " + i); 
09 console.l1og("j] after declare = " + Jj); 
10 Let y= 

uh } 


T2000 < /geript> 


关于 【代码 2-9】 的 分 析 如 下 : 

第 06 一 11 行 代码 定义 了 一 个 “ 块 级 作用 域 ”。 

第 07 行 代码 通过 let 关键 字 定 义 了 第 一 个 变量 i， 该 变量 的 声明 定义 在 使 用 之 前 。 

第 10 行 代 码 通过 let 关键 字 定 义 了 第 二 个 变量 j， 该 变量 的 声明 定义 在 使 用 之 后 。 

运行 页 面 ， 调 试 信息 如 图 2.9 所 示 。 从 浏览 器 控制 台中 输出 的 结果 来 看 ， 第 二 个 变量 j 的 声明 
定义 在 使 用 之 后 ， 因 此 就 直接 报错 了 。 由 此 可 见 ， 在 使 用 let 关键 字 声 明 变 量 初始 化 之 前 是 无 法 调 
用 该 变量 的 。 


Developer Tools - ECMAScript in 15-days - http://localhost:63342/Webs 





[a Inspecto Console Debugge Style Editc Performanc Memon Networ| Storagt 轩 " 团 目 容 口 了 


从 时 Filteroutput | PersistLogs 

i before declare= 1 chO2-es-let-rules-a,html :29:;13 

&A ReferenceError: can't access lexical declaration ch@2-es-let-rules-a.html :30:13 
j" before initialization 


图 2.9 let 关键 字 使 用 规则 (1) 
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下 面 接 独 看 第 二 个 关于 let 关键 字 使 用 规则 的 代码 示例 〈 详 见 源 代码 ch02 目录 中 的 
ch02-es-let-rules-b.html 文件 ) 。 


【代码 2-10】 

01 <script type="text/javascript"> 
02 "Se SEPloG 

03 WE 

04 * 定义 块 级 作用 域 

DOS a 

06 { 

(OM let a= 1; 

08 console.log("a = " + a); 
09 let a = 2; 

0 console.log("a = " + a); 
Tl } 


T2200 /SerUipE> 


关于 【代码 2-10】 的 分 析 如 下 : 

第 06 一 11 行 代 码 定 义 了 一 个 “ 块 级 作用 域 ”。 

第 07 行 代码 通过 let 关键 字 定 义 了 一 个 变量 a， 并 进行 了 初始 化 赋值 操作 a=1。 

第 09 行 代码 再 次 尝试 通过 let 关键 字 重 新 定义 变量 a， 并 重新 进行 了 初始 化 赋值 操作 a=2。 

运行 页 面 ， 调 试 信息 如 图 2.10 所 示 。 从 浏览 器 控制 台中 输出 的 内 容 来 看 ，【 代 码 2-10】 直 接 
报错 了 【提示 错误 为 “重复 声明 变量 ”) 。 由 此 可 见 ， 使 用 let 关键 字 是 无 法 重复 声明 定义 同一 个 
变量 的 。 


Developer Tools - ECMAScript in 15-days - http://localhost:633421W 





[Ca Inspectc Consol Debugge Style Edit Performan Memor Networ Storag 团团 上 日 窗口 了 可 


人 时 Filter output Persist Logs 


A SyntaxError: redeclaration of let a ch02-es-let-rules-b.html:30:16 
note: Previously i Line 28, column 16 chO2-es-let-rules-b.html:28:16 


Dasaeenneenssnsensenernsensnnten een n nn 


图 2.10 let 关键 字 使 用 规则 (2) 


2.3.6 let 关键 字 应 用 


前 面 介 绍 了 这 么 多 的 铺 热 内 容 ， 下 面 该 进入 重点 内 容 了 。 还 是 之 前 的 疑问 ， 既 然 let 关键 字 的 
功能 也 可 以 通过 var 关键 字 来 实现 ， 那 么 ECMAScript 6 语法 规范 中 新 增 的 这 个 let 关键 字 的 意义 何 
在 呢 ? 文字 阐述 往往 没有 实际 代码 表达 得 那么 透彻 ， 还 是 先 看 一 个 具体 的 代码 实例 。 

下 面 是 一 个 为 了 更 好 地 介绍 let 关键 字 应 用 所 进行 铺垫 的 代码 示例 〈 详 见 源 代码 ch02 目录 中 
的 ch02-es-let-usage-a.html 文件 ) 。 


【代码 2-11 】 

01 <script type="text/javascript"> 

02 var arrJSs = [I"JavaSscript", "ECMASCript" "TypeScecript"]s 
U3 1 hr | 

04 SoOnsoleslog (Taredst Tr = ar 

05 } 


Qo </seript> 
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关于 【代码 2-11】 的 分 析 如 下 : 

这 段 代 码 很 简单 ， 先 定义 了 一 个 字符 串 数组 ,然后 通过 for 循环 语句 依次 在 浏览 器 控制 台中 输 
出 每 个 数组 项 的 内 容 。 

运行 页 面 ， 调 试 信息 如 图 2.11 所 示 。 浏 览 器 控制 台中 依次 输出 了 每 个 数组 项 的 内 容 。【 代 码 
2-11】 没有 什么 特别 之 处 ， 主 要 是 用 它 作 为 铺垫 来 引出 下 面 的 代码 。 


Developer Tools - ECMAScript in 15-days - http://localhost:6334: 


Ca Inspect Consol Debugg Style Edit Performar Memo Netwol Storac 轩 " 园 目 窗 日 可 


亲 时 Filter output _| Persist Logs 
arrJ]JS[6] = JavaScript ch02-es-let-usage-a.html :25:13 
| arrJS[1] = ECMAScript chO2-es-let-usage-a.html :25:13 
arrJS[2] = TypeScript chO2-es-let-usage-a.html :25:13 


TT 


Danemannsnsmsnnsntnnensn nnn nnn nn mm nn nnn nnn nn 


图 2.11 let 关键 字 应 用 (1) 


下 面 接 看 看 一 个 在 【代码 2-11】 基 础 上 稍 作 改动 的 代码 示例 《〈 详 见 源 代 码 ch02 目录 中 的 
ch02-es-let-usage-b.html 文件 ) 。 


【代码 2-12】 

01 <script type="text/javascript"> 

02 var arrilS = [avaseript", "ECMAScript" "TypeScript"]: 
03 yo so (hh ds STR 

04 setTimeout (function () { 

05 Soonsoleslodl areIe[l TT To "= aarpIslil)e 
06 I 008 

07 } 


O80 /scripe> 


关于 【代码 2-12】 的 分 析 如 下 : 

这 段 代 码 与 【代码 2-11】 的 主要 区 别 就 是 ， 在 第 04 一 06 行 代码 使 用 了 setTimeout(0 方 法 控制 
输出 数组 的 内 容 。 此 处 setTimeout() 方 法 的 主要 作用 是 设置 数组 的 延 时 输出 ， 如 果 读 者 想 了 解 关 于 
setTimeout() 方 法 的 详细 说 明 ， 可 以 参考 JavaScript 的 官方 文档 。 

运行 页 面 ， 调 试 信息 如 图 2.12 所 示 。 如 图 2.12 中 箭头 所 指 ， 第 05 行 代码 输出 了 重复 三 次 的 
数组 项 内 容 (未 定义 ，undefined) 。 这 个 结果 与 图 2.11 中 的 内 容 完全 不 同 ， 为 什么 呢 ? 





Developer Tools - ECMAScript in 15-days - http://localhost:6334 


[a Inspect Conso Debugg Style Edi Performar Memo Netwo Storac 回 -* 园 日 座 日 加 


闸 时 Filteroutput | Persist Logs 


arrJs[3] = undefined 剑 罗 chg2-es-Let-Usage-b.htmi:26:17 





和 。。。sooooooaonaoasaaoaaonaoaaaasaaose soaaaaaaasasonessaaaasaasaaoaasasaaamaaoaaoasaasaasaaeaasasaasaasaseasemasaasasesassaaaasaaaaaeaaasaaaasaaaae sseasaaeaasaaaassasaaaaaaaaaassasaae sseaassasaasaasaaaassaesaasaasaaaassmasaasaeaaesassasaasaeaaesassasaaaaeeaaessssesaasaeasesssaasa 


图 2.12 let 关键 字 应 用 〈2) 
主要 原因 还 是 变量 的 作用 域 造 成 的 。 第 03 行 代码 定义 的 for 循环 语句 的 自 变 量 i 是 通过 var 
关键 字 声 明 的 ， 因 此 该 自 变 量 i 的 作用 域 就 是 整个 脚本 代码 空间 。 由 于 setTimeout( 方 法 会 设 定 延 
时 ， 因 此 在 for 循环 语句 执行 完毕 后 ， 第 05 行 代 码 定 义 的 在 浏览 器 控制 台中 输出 内 容 仍 未 执行 到 ， 
而 此 时 自 变 量 i 的 值 已 经 变 为 3 了 。 所 以 ,最 后 等 到 第 05 行 代码 执行 时 ,获取 的 已 经 是 数组 项 arrJS[3] 
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(未 定义 ，undefined) 的 内 容 了 。 

至 于 造成 【代码 2-12】 问 题 的 主要 原因 ， 是 由 ECMAScript 语法 规范 中 没有 “ 块 级 作用 域 ”的 
概念 造成 的 。 那 么 该 如 何 解决 呢 ? 此 时 就 需要 ECMAScript 6 语法 规范 新 增 的 let 关键 字 发 挥 作用 
1s 

下 面 继续 看 一 个 在 【代码 2-12】 基 础 上 稍 作 改动 的 代码 示例 〈 详 见 源 代码 ch02 目录 中 的 
ch02-es-let-usage-c.html 文件 ) 。 

【代码 2-13 】 


01 <script type="text/javascript"> 


02 Var arrJS = ["JavaScript", "ECMAScript", "TypeScript"]: 
03 for (let i = 0; i < 3; i++) { 

04 setTimeout (function () { 

05 CoOnsole lo ass 
06 J OO 

On } 


08mMm</seript> 


关于 【代码 2-13】 的 分 析 如 下 : 

这 段 代 码 与 前 面 【 代 码 2-12】 的 唯一 区 别 就 是 第 03 行 代码 中 的 for 循环 语句 的 自 变 量 i 是 通 
过 let 关键 字 来 定义 的 。 

运行 页 面 , 调试 信息 如 图 2.13 所 示 。 从 浏览 器 控制 台中 输出 的 内 容 来 看 , 其 结果 与 【代码 2-11 】 
完全 相同 。 这 就 说 明 let 关键 字 成 功 将 自 变 量 i 的 作用 域 限定 在 每 一 次 for 循环 语句 块 内 了 ， 因 此 也 
就 能 获取 正常 的 数组 项 的 内 容 了 。 


Developer Tools - ECMAScript in 15-days - http://localhost:6334 





Ca Inspect Conso Debugg Style Edil Performat Memo Netwo Storac 轩 ~" 园 上 日 肉 日 可 


闸 时 Filter output _ | Persist Logs 
| arrJ]sS[6] = JavaScript chO2-es-let-usage-c.html:26:17 
arrJSs{[l1] = ECMAScript ch02-es-let-usage-c.html:26:17 
arrJ]JS[2] = TypeScript chO2-es-let-usage-c.html:26:17 


PET TET ET TE TE TT 


图 2.13 let 关键 学 应 用 (3) 


2.4 const 关键 字 


常量 在 类 似 C 和 Java 这 类 高 级 语言 中 很 常用 ，ECMAScript 6 语法 规范 中 也 新 增 了 一 个 const 
关键 字 来 实现 常量 定义 的 功能 。 

ECMAScript 6 语法 规范 中 的 常量 也 适用 于 “ 块 级 作用 域 ” 的 概念 ， 有 点 像 使 用 let 关键 字 定 义 
的 变量 。 与 其 他 高 级 语言 类 似 ，ECMAScript 的 常量 值 同 样 不 能 通过 重新 赋值 来 改变 ， 并 且 也 不 能 
重新 进行 声明 。 

常量 声明 的 同时 就 要 进行 初始 化 ， 而 运算 符 创建 的 值 仅 是 一 个 只 读 引 用 ， 因 此 也 无 法 进行 更 
改 。 但 也 有 例外 ， 如 果 创 建 的 常量 是 一 个 引用 的 对 象 ， 就 可 以 改变 对 象 的 内 容 ( 如 对 象 的 参数 值 ) 
本 
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下 面 先 看 一 下 const 的 代码 示例 〈 详 见 源 代码 ch02 目录 中 的 ch02-es-const.html 文件 ) 。 
【代码 2-14 】 


01 <script type="text/javascript"> 


0Q2 /大 类 

03 * Const 声明 时 必须 初始 化 
04 */ 

05 const myPl; 


O06 /seeipt> 


关于 【代码 2-14】 的 分 析 如 下 : 
第 05 行 代码 尝试 通过 const 关键 字 声 明了 一 个 音量 myPI， 但 没有 进行 初始 化 操作 。 
运行 页 面 ， 调 试 信息 如 图 2.14 所 示 。 从 浏览 器 控制 台中 输出 的 内 容 来 看 ， 脚 本 调试 器 直接 提 
示 需 要 进行 常量 的 初始 化 操作 。 
[Ca Inspe Cons Debu Style E Perfor Mem Netv Stor: 轩 ~" 轩 上 日 容 日 可 
人 阔 时 Filter output _ | Persist Logs 


A SyntaxError: missing = in const chO2-es-const.html:26:14 


declaration [Learn Mor 王 


esasssssstsstssssstsstississisrta tat tists at ts rst sts tt .tts tts ss tt tars rr tt sas tt bt tr ra tr srs rr rrr st 


2.14 ”const 关键 字 (1) 


下 面 继 续 看 一 个 const 关键 字 的 代码 示例 ( 详 见 源 代 人 码 ch02 目录 中 的 ch02-es-const.html 文件 )。 
【代码 2-15 】 


01 <script type="text/javascript"> 


02 /** 

03 * const 常量 不 能 再 进行 赋值 操作 了 
04 * @type {number} 

05 本 

06 Const myPI = 3.1415926; 

07 myPI = 3.14; 


0 /soeupt> 


关于 【代码 2-15】 的 分 析 如 下 : 

第 06 行 代 码 尝 试 对 常量 myPI 再 次 进行 赋值 操作 。 

运行 【代码 2-15】 所 指定 的 HTML 页 面 ， 并 使 用 浏览 器 控制 台 查 看 调试 信息 ， 页 面 效 果 如 图 
2.15 所 示 。 如 图 2.15 中 篆 头 所 指 ， 从 浏览 器 控制 台中 输出 的 内 容 来 看 ， 脚 本 调试 器 直接 对 常量 
次 赋值 的 初始 化 操作 给 出 了 重复 声明 定义 类 型 的 报错 。 





Developer Tools - ECMAScript in 15-days - http://ocalth 


[Ca Inspec Cons Debuc Style E( Perform Mem Netw Storz 团团 上 日 窗口 了 0 


商 时 Filter output [_ | Persist Logs 


AP TypeError: invalid assignment to const ch02-es-const,.html:32:9 


“myPI' [Learn Morel 





2.15 const 关键 字 (2) 
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接着 前 面 的 【代码 2-15】， 继 续 看 一 下 const 关键 字 的 代码 示例 ( 详 见 源 代码 ch02 目录 中 的 
ch02-es-const.html 文件 ) 。 
【代码 2-16 】 


01 <script type="text/javascript"> 


02 /** 

03 * const 常量 不 能 重复 声明 
04 * @type {number} 

05 Eh 

06 const myPI = 3.1415926; 
07 const myPI = 3.1415926; 


es 


关于 【代码 2-16】 的 分 析 如 下 : 

第 07 行 代码 尝试 对 常量 myPI 再 次 进行 声明 操作 。 

运行 页 面 ， 调 试 信息 如 图 2.16 所 示 。 如 图 2.16 中 箭头 所 指 ， 从 浏览 器 控制 台中 输出 的 内 容 来 
看 ， 脚 本 调试 器 还 是 直接 对 第 量 再 次 赋值 的 初始 化 操作 给 出 了 重复 声明 定义 类 型 的 报错 。 


Developer Tools - ECMAScript in 15-days - http://localhost:633: 





Ca Inspect Conso Debugo Style Edi Performa Memo Netwo Storac 回 -* 园 日 宗 日 上 口 


谷 时 Filter output [_ | Persist Logs 
A SyntaxError: redeclaration of const myPI chO2-es-const,.html :38:14 


note: Previously declared at line 37, column 14 chO2-es-const.html:37:14 


Noooooooooooooooooooooooooooo2poooooooooooo0o0ooooooooooooooooooooooo0ooooooooooooopooooooooeeooooooooooopoooooooooooooooooooooooooooooooooooopooooooooooooooooooo0oopooooooooeoooooooo0ooooooooooooooooopoooooooooooooooooooooooooooooooooooooooooop0oooooooooopoooooo00oooooeooooo00000 


2.16 const 关键 字 (3) 


男 外 ,对 于 已 经 经 过 const 关键 字 声 明 的 向量 ,再 次 使 用 var 或 let 关键 字 声 明 也 是 不 被 允许 的 。 
前 面 的 几 个 代码 实例 告诉 我 们 ， 和 常 量 已 经 声明 定义 就 无 法 再 更 改 了 ， 这 点 是 毋庸 置疑 的 。 不 
过 也 有 一 种 例外 一 一 对 象 音量 的 参数 值 是 可 以 更 改 的 。 需 要 注意 ， 对 象 第 量 本 身 是 不 可 更 改 的 ， 仅 
是 常量 参数 可 以 更 改 。 
下 面 看 一 个 const 关键 子 定义 对 象 常 量 的 代码 示例 ( 详 见 源 代码 ch02 目录 中 的 ch02-es-const.html 
文件 》。 
【代码 2-17】 


01 <script type="text/javascript"> 





02 /** 

03 * const 声明 对 象 常 量 

04 * @type {{key: string}} 

05 汪 3 

06 const myObi = {"kevy". JavaSscript"};s 
0 console.log("key : " + myObj .Kkey); 
08 myObj .key = "ECMAScript"; 

09 console.log("key : " + myobj .key) : 


TOM sereiE> 


关于 【代码 2-17】 的 分 析 如 下 : 
第 06 行 代码 通过 const 关键 学 声明 了 一 个 常量 对 象 (myObj) 。 
第 08 行 代 公 尝试 修改 常量 对 象 myObj 中 key 的 参数 值 。 


Si1 
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运行 页 面 ， 调 试 信息 如 图 2.17 所 示 。 从 浏览 器 控制 台中 输出 的 内 容 来 看 ， 第 08 行 代码 成 功 修 
改 了 常量 对 象 myObj 中 key 的 参数 值 。 


X Developer Tools - ECMAScript in 15-days - http:// 


[a Inspe Cons Deb' Style Perfol Mem Nety Stor: 回 - 园 日 达 日 口 





人 曾 是 Filter output PersistLogs 
| key : ECMAScript ch02-es-const.html:44:9 
key : JavascrIpt 下 、 ch02-es-const.html:46:9 


2.17 const 运算 符 (4) 


2.5 ” ECMAScript 关键 字 和 保留 字 


在 ECMAScript 语法 规范 中 ， 规 定 了 一 些 特殊 字符 串 属于 关键 子 和 保留 字 范 畴 ， 均 是 不 能 作为 变 
量 名 和 函数 名 来 使 用 的 。 下 面 列 举 一 些 ECMAScript 语法 规范 中 定义 的 保留 字 和 关键 字 ， 详 见 表 2.2。 


表 2.2 ECMAScript 关键 字 和 保留 字 


ECMAScript 关键 字 和 保留 字 
delll jdeee ld je ee | 
ea Jeal je |tse ji |tmay 
float fr feim jso | |impemes 
由 


impoat |in jisanceof |in |ineraee 


mg lmie lmw | 加 ps me 
Protected |puble |jrm |st jsaice |sapr 
vich symehronized [this jw ws jms 
FS FE 
ie jw ly | | | 


备注 : 表 中 带 “* ”的 是 ECMAScript 6 中 新 增 的 。 


除了 表 2.2 中 定义 的 保留 字 和 关键 字 ， 还 有 一 些 ECMAScript 语法 规范 中 定义 的 对 象 、 属 性 和 
方法 也 是 避免 作为 变量 名 和 函数 名 来 使 用 的 ， 具 体 见 表 2.3。 


表 2.3 “ECMAScript 对 象 、 属 性 和 方法 


ECMAScript 对 象 、 属 性 和 方法 
Amy |Dae em inmeio | hasOwnProperty 
isFinite [isNaN |isproioypeof [lengh Math NN 





name |Number |objet 
7 
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另外 再 要 读者 注意 的 是 ， 如 果 把 关键 字 和 保留 字 作 为 变量 名 或 国 数 名 来 使 用 ， 就 有 可 能 得 到 
类 似 “Identifier Expected” 这 样 的 错误 消息 。 


2.6 ”本 芋 小 结 


本 章 主要 介绍 了 ECMAScript 语法 规范 的 基础 知识 ， 包 括 如 何 通过 var 关键 字 声 明定 义 变量 、 
如 何 使 用 let 和 const 关键 字 以 及 ECMAScript 关键 字 和 保留 字 等 方面 的 内 容 , 并 通过 一 些 具体 实例 
进行 讲解 。 希 望 读者 通过 对 本 章 知识 内 容 的 学 习 ， 掌 握 ECMAScript 脚本 语言 开发 的 基础 。 


pe 


值 与 类 型 


本 章 将 介绍 ECMAScript 值 与 类 型 方面 的 相关 知识 ， 包 括 ECMAScript 6 语法 规范 中 关于 类 型 
的 一 些 新 特性 ， 这 些 内 容 属于 ECMAScript 脚本 语言 中 比较 重要 的 部 分 。 


3.1 ECMAScript 原始 值 与 引用 值 


本 节 简单 介绍 ECMAScript 原始 值 与 引用 值 的 基本 内 容 , 主要 包括 5 种 原始 类 型 的 概念 和 特点 。 


3.1.1 “ECMAScript 原始 值 与 引用 值 


根据 ECMA-262 规范 中 的 定义 ， 变 量 可 以 为 两 种 类 型 的 值 ， 即 原始 值 和 引用 值 。 那 么 这 两 种 
类 型 的 值 有 什么 区 别 呢 ? 我 们 先 看 一 下 官方 给 出 的 原始 值 和 引用 值 的 定义 。 

@ 原始 值 (原始 类 型 ) : 原始 值 是 存储 在 栈 (stack ) 中 的 简单 数据 段 ， 换 句 话 解释 就 是 原始 值 
直接 存储 在 变量 访问 的 位 置 。 根 据 ECMAScript 语法 规范 中 的 介绍 ， 原 始 值 包括 Undefined、 
Null、Boolean、Number 和 String 5 大 类 型 。 

@ 引用 值 (引用 类 型 ) : 引用 值 是 存储 在 堆 (heap ) 中 的 对 象 ， 简 单 解 释 就 是 存储 在 变量 处 的 
值 是 一 个 指针 (pointer ) ， 指 向 存储 对 象 的 内 存 处 。 

另外 ， 这 里 提 到 了 关于 指针 的 概念 ， 对 于 学 习 过 C 语言 的 读者 会 比较 容易 理解 引用 值 的 概念 。 

如 果 读 者 对 指针 的 概念 比较 模糊 ， 建 议 最 好 选 一 本 C 语言 教科 书 认 真 阅 读 一 下 ， 相 信 一 定 会 有 很 
大 的 助 益 。 
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3.1.2 “ECMAScript 原始 类 型 概述 


ECMAScript 语法 规范 中 定义 了 5 种 原始 类 型 (primitive type), 即 前 面 提 到 的 Undefined、Null、 
Boolean、Number 和 String。 根 据 Ecma-262 规范 中 的 摘 述 ， 将 术语 “类 型 (type) ”定义 为 “ 值 的 
一 个 集合 ”， 其 中 每 种 原始 类 型 均 定义 了 其 所 包含 的 值 的 范围 及 其 字面 量 表示 形式 。 

ECMAScript 语法 规范 提供 了 typeof 运算 符 来 判断 一 个 值 是 否 在 茶 种 类 型 的 范围 内 。 设 计 人 员 
可 以 用 该 运算 符 判 断 一 个 值 是 否 表示 一 种 原始 类 型 , 不 但 可 以 判断 出 是 否 为 原始 类 型 , 还 可 以 判断 
出 具体 表示 哪 种 原始 类 型 。 在 JS 脚本 中 使 用 typeof 运算 符 将 返回 下 列 值 之 一 : 
undefined: 如 果 变 量 是 Undefined 类 型 的 ， 会 返回 该 类 型 。 
boolean: 如 果 变 量 是 Boolean 类 型 的 ， 会 返回 该 类 型 。 
number: 如 果 变 量 是 Number 类 型 的 ， 会 返回 该 类 型 。 
string: 如 果 变 量 是 String 类 型 的 ， 会 返回 该 类 型 。 
object: 如 果 变 量 是 一 种 引用 类 型 或 Null 类 型 的 ， 会 返回 该 类 型 。 


3.2 Undefined 原始 类 型 


首先 要 介绍 的 是 ECMAScript 语法 规范 中 的 第 一 种 原始 类 型 一 一 Undefined。Undefined 类 型 其 
实 只 有 一 个 值 ， 即 undefined。 当 声明 的 变量 未 进行 初始 化 时 ， 该 变量 的 默认 值 就 是 undefined。 





是 有 点 临 涩 难 懂 ， 下 面 通 过 具体 实例 来 理解 Undefined 原始 类 型 的 概念 与 用 法 。 

先 看 第 一 个 关于 _ Undefined 类 型 的 代码 示例 〈 详 见 源 代 码 ch03 目录 中 的 ch03-es-undefined- 
a.html 文件 ) 。 

【代码 3-1】 

01 <script type="text/javascript"> 

02 console.log("print "undefined' is : " + undefined); 


03 console.log ("print '‘'typeof undefined' is : " + typeof undefined); 
UA SciPE 


关于 【代码 3-1】 的 分 析 如 下 : 

第 02 行 代码 直接 在 浏览 器 控制 台 窗口 中 输出 了 undefined， 目 的 是 看 一 下 Undefined 类 型 在 页 
面 中 的 输出 效果 。 

第 03 行 代 码 直 接 在 浏览 器 控制 台 寄 口中 输出 了 “typeof undefined”, 目的 是 看 一 下 通过 typeof 
运算 符 操 作 后 的 Undefined 类 型 在 页 面 中 的 输出 效果 。 

运行 【代码 3-1】 所 定义 的 HTML 页 面 并 使 用 浏览 器 控制 台 碍 看 调试 信息 ， 页 面 效 果 如 图 3.1 
所 示 。 
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Developer Tools - ECMAScript in 15-days - http://localhost:63: 


[Ca Inspect Consc Debugc Style Edi Performa Memo Netwc Storat 肝 " 园 目 局 日 了 可 


闸 是 Filter output (_ | Persist Logs 
print 'undefined’' is : undefined ch03-es-undefined-a.html:23:3 
print “typeof undefined” is : undefined ch03-es-undefined-a.html:24:3 


DE 


Deeneeneeneennenneenenen 二 


3.1 ”Undefined 原始 类 型 (1) 


从 图 3.1 中 可 以 看 到 ，Undefined 类 型 和 通过 typeof 运算 符 操 作 后 的 Undefined 类 型 在 控制 台 
窗口 中 的 输出 结果 均 是 undefined。 

下 面 继续 看 第 二 个 关于 Undefined 类 型 的 代码 示例 ( 详 见 源 代码 ch03 目录 中 的 ch03-es- 
undefined-b.html 文件 ) 。 

【代码 3-2 】 

01 <script type="text/javascript"> 

02 var V_ undefined; 

03 console.log(v undefined); 


04 console.log(typeof v undefined); 
U5/gcript> 


关于 【代码 3-2】 的 分 析 如 下 : 

第 02 行 代 码 通过 var 关键 字 定 义 了 一 个 变量 v_ undefined， 注 意 此 处 并 未 初始 化 该 变量 。 

第 04 行 代码 直接 在 浏览 器 控制 台 窗 口中 输出 了 typeofv_ undefined”, 目的 是 看 一 下 通过 typeof 
运算 符 操作 后 的 变量 v undefined 在 页 面 中 的 输出 效果 。 

运行 页 面 ， 调 试 信 息 如 图 3.2 所 示 。 如 果 变 量 定 义 后 未 初始 化 ， 则 无 论 是 直接 输出 该 变量 还 是 
通过 typeof 运算 从 操作 后 ， 在 控制 台中 的 输出 结果 均 是 undefined。 





Developer Tools - ECMAScript in 15-days - http://localhost:63 


[a Inspect Conso Debugc Style Edi Performa Memo Netwc Storat 轩 " 园 目 内 口 了 可 


会 时 Filter output _| Persist Logs 
undefined ch03-es-undefined-b.html:24:3 
| undefined ch03-es-undefined-b.html:25:3 


3.2 Undefined 原始 类 型 (2) 


下 面 继续 看 第 三 个 关于 Undefined 类 型 的 代码 示例 〈 详 见 源 代 码 ch03 目录 中 的 ch03-es- 
undefined-c.html 文件 ) 。 

【代码 3-3】 

01 <script type="text/javascript"> 

02 console.log(typeof v undefined); 


03 console.log(v undefined); 
Qa A elie 


关于 【代码 3-3】 的 分 析 如 下 : 
第 02 行 代 码 直 接 在 浏览 器 控制 台 窗 口中 输出 了 “typeofv_ undefined”， 注 意 变 量 v_ undefined 
连 基 本 的 声明 定义 操作 都 没有 进行 , 因为 我 们 知道 ECMAScript 语法 允许 变量 未 经 过 声明 也 可 以 使 
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用 ， 这 里 的 日 的 就 是 测试 一 下 通过 typeof 运算 符 操 作 后 的 未 声明 变量 v_ undefined 在 页 面 中 的 输出 
效果 。 

第 03 行 代码 直接 在 浏览 器 控制 台 窗 口中 输出 了 该 未 声明 的 变量 v undefined 。 

运行 页 面 ,， 调试 信息 如 图 3.3 所 示 。 如 果 变 量 未 声明 定义 ， 则 直接 通过 typeof 运算 符 操作 该 变 
量 后 ， 在 控制 台中 的 输出 结果 仍 是 undefined。 如 果 未 经 过 typeof 运算 符 操作 ， 直 接 在 控制 台中 输 
出 该 未 声明 的 变量 〈 也 未 初始 化 ) ， 就 会 提示 变量 “未 定义 ”的 脚本 错误 。 


Developer Tools - ECMAScript in 15-days - http://localhost:63342 





[a Inspect Conso Debugo Style Edit Performar Memol Netwo Storag 加 7-* 园 日 半日 口 


闸 时 Filter output _| Persist Logs 
undefined ch03-es-undefined-c.html :23:3 
APF ReferenceError: v undefined is not ch03-es-undefined-c.html:24:3 


defined [Learn More] 


Basennsaneennsanneaansanasaneansanennanansanennnnnnananaaaaanmaaaaamaaaanaaaaaaaaaamaaaa 和 maaand 


3.3 ”Undefined 原始 类 型 (3) 


下 面 继续 看 第 四 个 关于 Undefined 类 型 的 代码 示例 ( 详 见 源 代码 ch03 目录 中 的 ch03-es- 
undefined-d.html 文件 ) 。 

【代码 3-4】 

01 <script type="text/javascript"> 


02 var Vv undefined; 
03 if(v undefined == undefined) { 


04 console.log("if v undefined == undefined is true."); 
05 J else 1 

06 console.log("if v undefined == undefined is false."); 
We 


Qe /cri 


关于 【代码 3-4】 的 分 析 如 下 : 

第 02 行 代码 通过 var 关键 字 定义 了 一 个 变量 v_undefined， 注 意 此 处 并 未 初始 化 该 变量 。 

第 03 一 07 行 代码 通过 证 条 件 运 算 符 判断 该 变量 v_ undefined 与 Undefined 类 型 是 否 逻 辑 相 等 ， 
并 根据 逻辑 运算 结果 在 浏览 器 控制 台 窗 口中 输出 相应 的 结果 。 

运行 页 面 ， 调 试 信息 如 图 3.4 所 示 。 从 图 3.4 中 箭头 所 指 可 以 看 到 ， 声 明 后 未 初始 化 定义 的 变 
量 在 逻辑 判断 上 与 Undefined 原始 类 型 是 相等 的 。 


Developer Tools - ECMAScript in 15-days - http://localhost:63: 





Ca Inspect Conso Debugc Style Edi Performa Memo Netwo Storac 轩 ~" 轩 目 肉 日 I 


人 闸 时 Filter output [| Persist Logs 


if v undefined == undefined is true. ch03-es-undefined-d.html:25:4 





3.4 Undefined 原始 类 型 (4) 


最 后 ， 看 一 下 第 五 个 关于 Undefined 类 型 的 代码 示例 ( 详 见 源 代 人 码 ch03 目录 中 的 ch03-es- 
undefined-e.html 文件 ) 。 
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【代码 3-5 】 
01 <script type="text/javascript"> 
02 var Vv func undefined = (function(){}) (); 


0Q3 console.log(v func undefined); 
0a/script> 


关于 【代码 3-5】 的 分 析 如 下 : 

第 02 行 代 码 通过 var 关键 字 定 义 了 一 个 图 数 表达 式 变量 v_ func_undefined, 注意 此 处 的 函数 并 
没有 明确 的 返回 值 。 

第 03 代码 直接 在 浏览 器 控制 台 窗 口中 输出 了 函数 表达 式 变 量 v_func_undefined。 

运行 页 面 ， 调 试 信息 如 图 3.5 所 示 。 从 图 3.5 中 第 头 的 指示 可 以 看 到 ， 当 函数 未 定义 明确 的 返 
回 值 时 ， 函 数 表达 式 变 量 v fonc undefined 获取 的 返回 值 也 是 undefined。 
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[Ca Inspect Conso Debugc Style Edi Performal Memo Netwo Storac ~ 同上 由 内 口 了 


曾 时 Filter output [_ | Persist Logs 
undefined chO3-es-undefined-e.html:24:3 


ev 





3.5 ”Undefined 原始 类 型 (5) 


3.3 Null 原始 类 型 





本 节 将 介绍 ECMAScript 语法 规范 中 的 第 二 种 原始 类 型 一 一 Null。 其 实 ，Null 与 Undefined 类 
似 ， 也 是 只 有 一 个 值 (null) 的 原始 类 型 。 严 格 意义 上 来 说 ， 值 undefined 实际 上 是 从 值 null 派生 
而 来 的 ， 正 因为 如 此 ，ECMAScript 语法 规范 将 undefined 与 null 定义 为 相等 的 。 


估计 难以 治 握 其 真正 的 使 用 方法 ， 下 面 还 是 通过 具体 的 实例 来 理解 Null 原始 类 型 的 概念 与 用 法 。 
下 面 先 看 第 一 个 关于 Null 类 型 的 代码 示例 〈 详 见 源 代 码 ch03 目录 中 的 ch03-es-null-a.html 文 
件 ) 。 
【代码 3-6】 
01 <script type="text/javascript"> 
UZ oonacoleslogql prine nl TS nl 


US oonsole lo prine Eveor nuts EvDeor nuli}s 
04 </script> 


关于 【代码 3-6】 的 分 析 如 下 : 

第 02 行 代码 直接 在 浏览 器 控制 台 窗 口中 输出 了 null, 目的 是 看 一 下 Null 类 型 在 页 面 中 的 输出 
效果 。 

第 03 行 代码 直接 在 浏览 器 控制 台 窗 口中 输出 了 “typeof null”， 目 的 是 看 一 下 通过 typeof 运 
算 符 操 作 后 的 Null 类 型 在 页 和 面 中 的 输出 效果 。 
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运行 页 面 ， 调 试 信息 如 图 3.6 所 示 。 从 图 3.6 中 第 头 的 指示 可 以 看 到 ， 浏 览 器 控制 台中 直接 输 
出 Null 类 型 的 结果 是 null， 而 通过 typeof 运算 符 操 作 后 的 Null 类 型 ， 浏 览 器 控制 台中 输出 的 结果 
却 是 object。 


Developer Tools - ECMAScript in 15-days - http:/ /loc 





中 Inspe Cons Debu Style E Perforr Mem Netv Stor: 轩 ~ 轩 上 目 容 日 可 


曾 时 Filter output |_ | Persist Logs 
print null is : nuyull ch03-es-null-a.html:23:3 
print typeof nuill is : object chO3-es-null-a.html:24:3 





3.6 ”Null 原始 类 型 (1) 
此 处 读者 可 能 就 会 有 疑问 了 ， 为 什么 通过 typeof 运算 符 操作 后 的 null 值 会 返回 object 的 结果 


呢 ? 

其 实 ， 该 结果 源 于 JavaScript 脚本 语言 早期 版 本 中 的 一 个 小 错误 ， 阴 差 阳 错 又 恰恰 被 
ECMAScript 语法 规范 沿用 下 来 。 目 前 ，null 值 被 当 作 对 和 象 的 占 位 符 ， 这样 似 乎 能 够 解释 这 一 矛盾 。 
但 是 ， 根 据 严格 意义 的 ECMAScript 语法 规范 ，null 仍然 是 原始 值 ，Null 也 仍然 是 ECMAScript 原 
始 类 型 。 

下 面 继续 看 第 二 个 关于 Null 类 型 的 代码 示例 ( 详 见 源 代码 ch03 目录 中 的 ch03-es-null-b.html 
文件 ) 。 

【代码 3-7】 

01 <script type="text/javascript"> 

02 var v null = null; 

039 console。log(v null}); 


04 console.log(typeof v null); 
Oo /aCelpt> 


关于 【代码 3-7】 的 分 析 如 下 : 

第 02 行 代 码 通过 var 关键 字 定 义 了 一 个 变量 v_ null， 同 时 初始 化 该 变量 的 值 为 null。 

第 04 行 代码 直接 在 浏览 器 控制 台 窗 口中 输出 了 “typeof v_ null”， 目 的 是 看 一 下 通过 typeof 
运算 符 操作 后 的 变量 v_null 在 页 面 中 的 输出 效果 。 

运行 页 面 ， 调 试 信息 如 图 3.7 所 示 。 从 图 3.7 中 箭头 的 指示 可 以 看 到 ， 浏 览 器 控制 台中 直接 输 
出 了 变量 v_ null 类 型 的 结果 是 null， 而 通过 typeof 运算 符 操作 后 的 变量 Vv _null， 浏览 器 控制 台中 输 
出 的 结果 是 预想 中 的 object。 


Developer Tools - ECMAScript in 15-days - http://lc 


[a Inspe Cons Debu StyleE PerfFor Mem Netv Stor: 轩 " 轩 上 目 崔 口 了 可 


疹 是 Filter output [| Persist Logs 
null ch03-es-null-b.html:24:3 
object chO3-es-null-b.html:25:3 


hoooooooooooooooooooooooooopoiopooooooooooooiooooooooioooooooiooooooopoooiooooooooopooooooooooooooootooooooooopooooooooooooooooooooooooooooooooo0oooooooooooooooooooooooooooooooooootooooooooopoooooooooooooopooopooopoioooooooooooooooooooo0000 


3.7 Null 原始 类 型 (2) 
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下 面 再 看 一 下 Null 类 型 与 Undefined 类 型 进行 对 比 的 代码 示例 ( 详 见 源 代 人 码 ch03 目录 中 的 
ch03-es-null-c.html 文件 ) 。 
【代码 3-8】 


01 <script type="text/javascript"> 
02 if(null == undefined) { 


四 局 console .log("if null == undefined is true."): 
04 } else { 

了 二 console .log("if null == undefined is false.");} 
06 } 


作品 


关于 【代码 3-8】 的 分 析 如 下 : 

第 02 一 06 行 代码 直接 通过 if 条 件 运算 符 判 断 值 (null) 与 值 (undefined ) 是 否 逻 辑 等 于 〈 逻 
辑 相 等 ) ， 并 根据 逻辑 运算 结果 在 浏览 器 控制 台 窗 口中 输出 相应 的 信息 。 

运行 页 和 面 , 调试 信息 如 图 3.8 所 示 。 从 图 3.8 中 第 头 的 指示 可 以 看 到 , 值 (null) 与 值 (undefined) 
通过 逻辑 相等 的 判断 结果 返回 值 是 true。 


Developer Tools - ECMAScript in 15-days - http://Lc 


[Ca Inspe Cons Debu StyleE Perfor Mem Nety Stor: 回 - 园 日 半日 上 口 


曾 时 Filter output [_| Persist Logs 


if null == undefined is true. chQ3-es-null-c.html:24:4 





图 3.8 ”Null 原始 类 型 与 Undefined 原始 类 型 比较 


尽管 值 Cnull) 与 值 Cundefined) 在 逻辑 相等 判断 上 是 相等 的 ， 但 这 两 个 值 的 具体 含义 还 是 有 
区 别 的 。 为 变量 赋 null 值 表示 该 对 象 日 前 并 不 存在 ， 也 可 以 理解 为 仅仅 是 一 个 空 的 占 位 竺 《如 前 
文 所 述 ) ， 而 将 变量 定义 为 undefined 值 则 是 声明 了 变量 但 未 对 其 进行 初始 化 赋值 《如 前 文 代码 实 
例 ) 。 

为 外 ， 当 为 函数 方法 定义 返回 的 是 对 象 类 型 时 ， 硅 找 不 到 该 对 象 ， 则 返回 值 通常 就 是 null。 当 
尝试 获取 函数 方法 的 返回 值 时 ， 辱 该 函数 方法 未 定义 返回 值 ， 则 返回 值 通常 就 是 undefined。 


3.4 ”Boolean 原始 类 型 





本 节 将 介绍 ECMAScript 语法 规范 中 的 第 3 种 原始 类 型 一 一 Boolean。 对 于 Boolean 原始 类 型 ， 
是 ECMAScript 语法 规范 中 定义 的 最 常用 的 类 型 之 一 。 Boolean 类 型 有 两 个 值 , 即 大 家 所 熟知 的 true 
和 false。 
看 一 下 Boolean 类 型 的 代码 示例 〈 详 见 源 代 码 ch03 目录 中 的 ch03-es-boolean.html 文件 ) 。 
【代码 3-9】 
01 <script type="text/javascript"> 
02 Ws 
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03 * Boolean --- true 

04 外 

05 Var Vv b true = true; 

06 console.logl(v b true); 

07 console.log (typeof v b true); 

08 if(v b true) 

0 console.log("v b true is true."); 
ul else 

ba console.log("v b true is false."); 
1 if(v b true == 1) 

13 console.log("v b true == 1."); 

14 else 

外 二 console.log("v b true != 1."); 

16 es 

I * Boolean --- false 

18 se 

19 Var v b false = false; 

2 console.log(v b false); 

21 console.log(typeof v b false); 

之 之 if(v b false) 

2 司 Consoleniogrv2bEtalsecSseceUues ji 
24 else 

25 console.log("v b false is false."); 
26 if(v b false == 0) 

2 console.log("v b false == 0."); 

2 else 

29 consoleslog( vbifalse = 0 > 


Sh en el oh eS 


关于 【代码 3-9】 的 分 析 如 下 : 

第 05 行 代码 定义 了 一 个 变量 v_b true， 并 初始 化 赋值 为 true。 

第 07 行 代码 直接 在 浏览 器 控制 台 窗 口中 输出 了 “typeofv_b true”， 目 的 是 看 一 下 通过 typeof 
运算 从 操作 后 的 Boolean 类 型 在 页 面 中 的 输出 效果 。 

第 08 一 11 行 代码 直接 通过 让 条 件 运算 符 判 断 变量 v_b true 的 逻辑 值 , 并 根据 逻辑 运算 结果 在 
浏览 器 控制 台 窗 口中 输出 相应 的 信息 。 

第 12 一 15 行 代码 直接 通过 if 条 件 运 算 符 判 断 变 量 v_b_true 与 数值 “1” 是 否 多 辑 等 于 ， 并 根 
据 逻 辑 运算 结果 在 浏览 占 控 制 台 窗口 中 输出 相应 的 信息 。 这 样 测试 的 目的 是 源 于 C 语言 和 Java 语 
言 的 语法 中 布尔 值 “ 真 ”与 数值 “1” 是 逻辑 相等 的 ， 此 处 测试 一 下 在 ECMAScript 语法 规范 中 是 
侍 也 是 如 此 。 

第 19 一 29 行 代码 与 第 05 一 15 行 代码 的 功能 类 似 , 只 不 过 测试 的 是 false 值 ， 以 及 false 值 与 数 
值 0 的 关系 。 

运行 页 面 ， 调 试 信息 如 图 3.9 所 示 。 浏 览 器 控制 台中 直接 输出 变量 v_b true 的 结果 是 true， 而 
通过 typeof 运算 和 从 操作 后 的 变量 v_b true 在 浏览 器 控制 台中 输出 的 结果 就 是 Boolean 类 型 。 通 过 if 
条 件 运 算 符 判断 变量 v_b true 与 数值 1 是 否 逻 辑 等 于 的 结果 表明 ，Boolean 值 true 是 逻辑 等 于 数值 
1 的 ; 同样 ，Boolean 值 false 与 数值 0 是 逻辑 等 于 的 。 
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Developer Tools - ECMAScript in 15-days - http://loca 


车 Inspe' Cons Debuc StyleE Perforn Mem Netw Stor: 轩 " 园 目 窜 日 可 


闪 是 Filter output | Persist Logs 
true ch03-es-boolean.html:27:3 

| boolean ch03-es-boolean.html :28:3 
v b true is true. ch03-es-boolean.html :30:7 

v b true == 1. ch03-es-boolean.html :34:7 
false ch03-es-boolean.html:41:3 
boolean ch03-es-boolean.html :42:3 

v b false is false. ch03-es-boolean.html:46:7 

v b false == 0. ch03-es-boolean.html :48:7 


Deeeneeenneennenneen0n000000000 和 


3.9 Boolean 原始 类 型 


通过 以 上 测试 结果 ,相信 读者 对 于 ECMAScript 语法 中 的 Boolean 类 型 的 使 用 会 有 一 个 比较 清 
楚 的 理解 。 


3.5 _ Number 原始 类 型 





本 节 将 介绍 ECMAScript 语法 规范 中 的 第 4 种 原始 类 型 


Number。 


3.5.1 _ Number 原始 类 型 介绍 


Number 类 型 是 ECMAScript 5 种 原始 类 型 中 比较 重要 的 一 种 类 型 ， 同 时 也 是 比较 特殊 的 一 种 
类 型 。 特 殊 之 处 就 在 于 ，Number 类 型 既 可 以 表示 32 位 整数 值 ， 也 可 以 表示 64 位 浮 点 数值 。 对 于 
直接 定义 的 任意 类 型 数值 ，ECMAScript 语法 规范 均 识 别 为 Number 类 型 的 值 ， 因 此 Number 类 型 
使 用 起 来 也 是 非常 灵活 的 。 

Number 类 型 可 以 表示 二 进 制 、 八 进 制 、 十 进 制 和 十 六 进 制 数值 ， 还 可 以 表示 科学 计数 法 。 同 
时 ，ECMAScript 6 语法 规范 中 还 对 Number 类 型 进行 了 扩展 ， 增 加 了 一 些 很 实用 的 功能 。 


3.5.2 十 进 制 Number 原始 类 型 


一 般 来 说 ， 高 级 编程 语言 中 默认 均 会 采用 十 进 制 数值 进行 运算 ，ECMAScript 语法 规范 自然 也 
是 如 此 设计 的 。 

下 面 先 看 一 下 Number 类 型 十 进 制 数值 的 代码 示例 〔( 详 见 源 代码 ch03 目录 中 的 ch03-es- 
number-dec.html 文件 ) 。 


【代码 3-10】 

01 <script type="text/javascript"> 

02 Var 1 = 123; 

03 console.log("i = "+ i); 

04 console.log("typeof i = " + typeof i); 
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05 console lodgli 3 17) 

06 console log (Ti T= WO 1 1 

07 var i w= TIL" 1. 

08 console.log("typeof ii = " + typeof ii); 
09 onsoleslog (me To =07 

10 EGnSCTe TO TT eT oDeor (te) 


1 


关于 【代码 3-10】 的 分 析 如 下 : 

第 02 行 代码 声明 定义 了 一 个 变量 i， 并 初始 化 赋值 为 十 进 制 数值 123。 

第 05 行 代码 尝试 在 浏览 器 控制 台中 输出 变量 i1 相 加 (i+i) 后 的 结果 。 

第 06 行 代码 再 次 尝试 在 浏览 器 控制 台中 输出 变量 i1 相 加 (i+i) 后 的 结果 ,不 过 表达 方式 有 所 
不 同 。 理 论 上 ， 第 05 行 和 第 06 行 代码 似乎 结果 是 相同 的 ， 但 实际 的 结果 呢 ? 

运行 页 面 ， 调 试 信息 如 图 3.10 所 示 。 


Developer Tools - ECMAScript in 15-days - http://localhost: 





[a Inspec Cons' Debugt Style Ed Perform: Memc Netwr Stora 思 " 团 目 岂 口 了 可 


曾 ' 字 Filter output | Persist Logs 
i = 123 ch93-es-number-dec.htmL:24:9 
typeof i = number ch03-es-number-dec.html:25:9 
246 ch03-es-number-dec.html:26:9 
i+ i = 123123 ch03-es-number-dec.html :27:3 
typeof ii = string ch03-es-number-dec.html :29:3 
i+i= 246 ch03-es-number-dec.html:30:9 
i+i= number ch93-es-number-dec.htmlL:31:9 


sseeeeseseoeeeeoeseseesoseoesreseseswooeseoeeraoeseseesaseseovaesoscswosesesearesesesvesosesesroseseeoeseseereoesesoveeeoceweoooseoceveoeseeoveraseeeowosooeseesoeeocereoosesowoveseeeevooosesvesoseeocsreoooeewovescecoroooeovesoseeocorosoocswoooecocorooocoveceoeococe sj 


图 3.10 ”Number 原始 类 型 (十进制) 


从 图 3.10 中 可 以 看 到 ， 第 03 一 05 行 代码 和 输出 的 结果 是 符合 预期 的 。 但 是 第 06 行 代码 输出 的 
结果 〈“123123”) 却 与 第 05 行 代码 完全 背离 了 ， 似 乎 是 将 两 个 变量 i 连接 在 了 一 起 ， 为 什么 会 
这 样 呢 ? 

先 看 第 08 行 代 码 输出 的 结果 ， 表 明 第 07 行 代码 定义 的 变量 让 是 一 个 String 类 型 。 原 因 是 在 
ECMAScript 语法 规范 中 ， 对 于 将 字符 串 与 数值 并 列 通过 运算 符 “+” 进 行 的 操作 ， 默 认 将 数值 目 
动 园 换 为 字符 串 ， 从 而 整体 当 作 字符 串 连 接 操作 来 处 理 ， 因 此 第 06 行 代码 输出 了 如 此 结果 

23123 Ys 

那么 ， 第 06 行 代码 将 如 何 通过 改写 达到 第 05 行 代 码 的 效果 呢 ? 第 09 行 代码 给 出 了 答案 ， 只 
需要 将 “i +i” 用 括号 操作 一 下 (“ (ii+il ”) 即 可 实现 ， 相 当 于 提高 了 运算 优先 级 。 同 时 ， 第 
10 行 代码 输出 的 结果 也 证 明了 “ (i+1i) ”的 ECMAScript 类 型 仍 是 Number 类 型 。 





3.5.3 二进制 Number 原始 类 型 


二 进 制 数值 是 进行 位 运算 的 重要 参考 ，ECMAScript 6 语法 规范 中 新 增 了 对 二 进 制 数值 的 定义 
方法 。 具 体 是 通过 前 级 (0b 或 0B) 来 表示 二 进 制 数值 ， 这 里 的 字母 “b” 不 区 分 大 小 写 〈 大 小 写 
均 可 ) 。 

看 一 下 Number 类 型 二 进 制 数值 的 代码 示例 〔 详 见 源 代码 ch03 目录 中 的 ch03-es-number-bin.html 
文件 ) 。 
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【代码 3-11 】 


01 <script type="text/javascript"> 


02 "usSe strict"; 

03 var Vv_bin 4 = 0b0101; // TODO: 定义 二 进 制 数值 

04 console .log("0b0101 = "+ Vv bin 4); 

05 var v_ bin 8 = 0B01010101; // TODO: 定义 二 进 制 数 值 

06 console.10g ("0b01010101 = " + Vv bin 8); 

07 var v_ bin 16 = 0b0101010101010101;// TODO: 定义 二 进 制 数值 
08 console.10g ("0b0101010101010101 = " + v bin 16); 


O90 </script> 


关于 【代码 3-11】 的 分 析 如 下 : 


这 段 代 人 码 定义 了 3 个 二 进 制 数 值 变 量 , 分 别 实现 了 4 位 、8 位 和 16 位 二 进 制 数值 的 定义 过 程 。 
运行 页 面 ， 调 试 信息 如 图 3.11 所 示 。 二 进 制 数值 输出 的 结果 是 符合 预期 的 。 男 外 ， 注 意 到 即 


使 变量 定义 为 二 进 制 数值 ， 输 出 时 还 是 要 换算 成 十 进 制 数值 的 。 





Developer Tools A EVA 


[Ca Inspec Cons' Debugt Style Ed Performz Memc Netwr Stora 办 ~" 园 目 窗口 可 


闸 字 Filter output _|Persist Logs 
| 9bele1=5 chg3-es-number-bin.html:25:3 
0b01010101 = 85 ch03-es-number-bin.html:27:9 
bb681616161619616191 = 21845 ch63-es-number-bin.htmL:29;:9 


PPT TT 


图 3.11 Number 原始 类 型 (二进制 ) 


3.5.4 ”八进制 Number 原始 类 型 


在 最 早 的 ECMAScript 语 法 规范 中 对 八进制 数值 是 有 定义 方法 的 ,就 是 通过 前 级 数字 0 来 表示 。 
男 外 ， 在 ECMAScript 6 语法 规范 中 还 增加 了 对 八进制 数值 的 定义 方法 。 具 体 是 通过 前 级 (0o 或 
00) 来 表示 八进制 数值 ， 这 里 的 字母 “o” 不 区 分 大 小 写 《〈 大 小 写 均 可 ) 。 

看 一 下 Number 类 型 八进制 数值 的 代码 示例 〈 详 见 源 代码 ch03 目录 中 的 ch03-es-number-oct.html 


ws 





【代码 3-12】 


QL 
02 
03 
04 
05 
06 
07 
08 
US 
10 
11 
hs 
1 
14 
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<script type="text/javascript"> 


var v_ dec = 107;  // TODO: 定义 十 进 制 数值 
console.log("107 = " + Vv dec); 
var Vv_oct = 0107; // TODO: 定义 八进制 数值 
consoles log( O00 = GOCC)L 
var Vv_oct oct = Vv oct + Voct; // TODO: 八进制 数值 加 法 运算 
consoles Log (COLO Ol0N = TF VOCGocGE): 
var v_ dec oct = v_ dec + Voct;  // TODO: 十 进 制 数值 和 八进制 数值 加 法 运算 
console.log("107 + 0107 = " + Vv dec oct); 
var Vv oct es6 = 00107;  // TODO: 定义 ES6 八进制 数值 
console.10g("00107 = ”+ Vv oct es6); 


if(v oct es6 == V_oct) 
console .log("0o107 == 0107");} 
else 
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1 5 onsole slog( O00 一 由 从 工人 IN 

Lom /seeipe> 

关于 【代码 3-12】 的 分 析 如 下 : 

第 02 行 代码 定义 了 第 一 个 变量 v_ dec， 并 初始 化 赋值 为 十 进 制 数值 107。 

第 04 行 代 码 定 义 了 第 二 个 变量 v_oct, 并 初始 化 赋值 为 八进制 数值 0107 (ECMAScript 语法 规 
范 中 定义 八进制 数值 时 ， 使 用 数字 “0” 作 为 开头 ) 。 注 意 ， 这 里 赋值 使 用 的 “0107” 数 值 是 八 进 
制 数 值 ， 与 前 面 的 十 进 制 数值 107 是 不 同 的 。 

第 06 行 代 码 定 义 了 第 三 个 变量 v_oct oct， 并 初始 化 赋值 为 两 个 八进制 变量 v_oct 相 加 的 和 。 

第 08 行 代码 定义 了 第 四 个 变量 v_dec_oct， 并 初始 化 赋值 为 十 进 制 变量 v_dec 与 八进制 变量 
v_oct 相 加 的 和 。 

第 10 行 代码 定义 了 第 五 个 变量 v_oct_es6， 并 初始 化 赋值 为 八进制 数值 00107 (ECMAScript 6 语 
法 规范 中 对 八进制 数值 重新 进行 了 定义 ， 使 用 数字 字母 “00” 组 合作 为 开头 ， 分 别 是 数字 0 和 小 写字 
母 o) 。 注 意 ， 这 个 八进制 数值 的 新 定义 只 有 在 “严格 模式 ”下 才 会 遵循 ECMAScript 6 语法 规范 。 

第 12 一 15 行 代码 通过 站 条 件 判断 语句 对 八进制 数值 0107 和 00107 进行 了 逻辑 相等 的 判断 。 

运行 页 面 ， 调 试 信息 如 图 3.12 所 示 。 


Developer Tools - ECMAScript in 15-days - http://localhost:63 


[Ca Inspect Conso Debugc Style Edi Performa Memo Netwo Storac 轩 " 轩 上 目 窜 日 可 


闸 时 Filter output (| Persist Logs 
167 = 107 ch03-es-number-oct,html :24:3 
0107 = 71 ch03-es-number-oct.html:26:3 
6167 + 9167 = 142 ch03-es-number-oct.html :28:3 
197 + 96107 = 178 ch03-es-number-oct.html :30:3 
Bol67 = 71 ch93-es-number-oct .htmt:32;:9 
bo1l167 == 61067 ch93-es-number-oct.htmL:34:13 


smsmsneenenensnsnsnnsnsnneneneerntnsnnenennnteenrntn nen nn 


图 3.12” Number 原始 类 型 (八进制 ) 


从 图 3.12 所 示 ， 第 05 行 代码 在 浏览 器 控制 台 窗口 中 输出 的 变量 v_oct 的 内 容 为 71， 而 不 是 初 
始 化 定义 的 数值 0107， 说 明 ECMAScript 语法 规范 对 八进制 变量 返回 的 是 换算 后 的 十 进 制 数值 。 
因此 ， 第 07 行 代码 在 浏览 器 控制 台 窗口 中 输出 的 变量 v_oct_oct 的 内 容 为 142， 也 是 十 进 制 相 加 运 
算得 出 的 结果 。 

另外 , 第 09 行 代码 在 浏览 器 控制 台 窗 口中 输出 的 变量 v_dec_oct 的 内 容 为 178, 是 十 进 制 数值 
107 和 十 进 制 数值 71 相 加 运算 得 出 的 结果 。 这 就 表明 在 ECMAScript 语法 规范 中 八进制 与 十 进 制 
运算 时 ,默认 都 是 换算 成 十 进 制 来 计算 的 。 八 进 制 数值 运算 规则 如 此 ， 下面 的 十 六 进 制 数 值 运算 也 
是 一 样 的 。 

最 后 ， 通 过 第 12 一 15 行 代码 输出 的 结果 来 看 ， 八 进 制 数值 0107 和 00107 是 逻辑 相等 的 。 注 
意 ， 这 是 在 非 “严格 模式 ”条 件 下 才 会 成 立 的 。 如 果 在 “严格 模式 ”下 ， 八 进 制 数值 0107 是 会 报 
出 错误 的 。 





3.5.5 ”十 六 进 制 Number 原始 类 型 
通常 计算 机 的 编码 系统 会 采用 十 六 进 制 数值 来 表示 ， 如 ASCII 字符 编码 、 汉 字 编 码 、UTE 统 
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一 编码 等 。ECMAScript 语法 规范 中 对 十 六 进 制 数 值 也 是 有 定义 方法 的 ， 就 是 通过 前 级 “0x” 来 表示 。 
看 一 下 Number 类 型 十 六 进 制 数值 的 代码 示例 ( 详 见 源 代码 ch03 目录 中 的 ch03-es-number- 

hex.html 文件 ) 。 
【代码 3-13 】 


,0 
02 
3 
04 
05 
06 
07 
08 
09 


<script type="text/jJavascript"> 


var Vv dec = 1234; 
ConsSole .log("1234 = " 
Var Vv oct = 0147; 


console.1log("0147 
var V hex = 0Qx12ff; 

console.log ("0xl12ff = 
Var Vv hex hex = Vv hex 
console.1log ("Ox12ff£ 十 
var Vv dec hex = v dec 


+ Vv dec}): 
// TODO: 定义 八进制 数值 
TV OCt)> 
// TODO: 定义 十 六 进 制 数 值 
mT Vv hex)s 
+ V hex;  ”// TODO: 十 六 进 制 数值 加 法 运算 
Uxil2ff = "Pv hexshex): 
+ V_hex;  ”// TODO: 十 进 制 数 值 和 十 六 进 制 数值 加 法 运算 


Console.log("1234 + 0x]2ff = ”+ Vv dec hex); 


Var Vv oct hex = Vv oct 


+ V_hex;  // TODO: 八进制 数值 和 十 六 进 制 数值 加 法 运算 


consoles LIog( OT47 HOxl2ff = 7 voc hex)s 


</acript> 


关于 【代码 3-13】 的 分 析 如 下 : 

第 02 行 代 码 定义 了 第 一 个 变量 v_dec， 并 初始 化 赋值 为 十 进 制 数值 1234。 

第 04 行 代 码 定 义 了 第 二 个 变量 v_oct， 并 初始 化 赋值 为 八进制 数值 0147。 

第 06 行 代码 定义 了 第 三 个 变量 v_hex， 并 初始 化 赋值 为 十 六 进 制 数值 0x12ff (ECMAScript 语 
法 规范 中 定义 十 六 进 制 数值 时 ， 使 用 数字 “0x ”开头 来 表示 ) 。 

第 08 行 代码 定义 了 第 四 个 变量 v_ hex_hex， 并 初始 化 赋值 为 两 个 十 六 进 制 变量 v_ hex 相 加 的 和 。 

第 10 行 代码 定义 了 第 五 个 变量 v_ dec_hex， 并 初始 化 赋值 为 十 进 制 变量 v_dec 与 十 六 进 制 变 
量 v_ hex 相 加 的 和 。 

第 12 行 代码 定义 了 第 六 个 变量 v_oct_hex, 并 初始 化 赋值 为 八进制 变量 v_oct 与 十 六 进 制 变量 
v_hex 相 加 的 和 。 

运行 页 面 ， 调 试 信息 如 图 3.13 所 示 。 


Developer Tools - ECMAScript in 15-days - http://localhost: 





a Inspec Consc Debug' Style Ed Performz Memc Netwr Stora 轩 " 园 目 窜 日 了 


茄 时 Filter output 
| 1234 = 1234 
6147 = 163 
6xl2ff = 4863 


| Persist Logs 
ch03-es-number-hex.html:24:3 
ch03-es-number-hex.html :26:3 
ch03-es-number-hex.html:28:3 


Ox12ff + Ox12ff = 9726 ch03-es-number-hex.html:30:3 
1234 + Ox12ff = 6697 ch03-es-number-hex.html:32:3 
O147 + Ox12ff = 4966 ch03-es-number-hex.html:34:3 


如 图 3.13 所 示 ， 第 07 行 代 码 在 浏览 器 控制 台 窗 口中 输出 的 变量 v_hex 的 内 容 为 4863， 而 不 
是 初始 化 定义 的 数值 0x12ff， 说 明 ECMAScript 语法 规范 中 对 十 六 进 制 变量 返回 的 同样 是 换算 后 的 
十 进 制 数值 。 因 此 ， 第 09 行 代码 在 浏览 器 控制 台 窗 口中 输出 的 变量 v_ hex_hex 的 内 容 为 9726， 也 
是 十 进 制 相 加 运算 得 出 的 结果 。 
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男 外 ， 第 11 行 代码 在 浏览 器 控制 台 窗 口中 输出 的 变量 v_dec_hex 的 内 容 为 6097， 是 十 进 制 数 
值 1234 和 十 进 制 数 值 4863 相 加 运算 得 出 的 结果 ， 这 就 表明 在 ECMAScript 语法 规范 中 ， 十进制 与 
十 六 进 制 运算 时 ， 默 认 都 是 换算 成 十 进 制 来 计算 的 。 同 样 ， 第 13 行 代码 在 浏览 器 控制 台 窗 口中 输 
出 的 变量 v_oct hex 的 内 容 为 4966， 是 十 进 制 数 值 103 和 十 进 制 数值 4863 相 加 运算 得 出 的 结果 ， 
同样 表明 在 ECMAScript 语法 规范 中 , 八进制 与 十 六 进 制 运 算 时 , 默认 都 是 换算 成 十 进 制 来 计算 的 。 


3.5.6” 浮 点 数 Number 原始 类 型 


在 ECMAScript 语法 规范 中 对 浮 点 数 也 有 详细 的 定义 。 浮 点 数 在 运算 过 程 中 要 特别 注意 与 字符 
串 的 区 别 。 
看 一 下 Number 类 型 浮 点 数值 的 代码 示例 ( 详 见 源 代码 ch03 目录 中 的 ch03-es-number-float.html 


文件 ) 。 
【代码 3-14】 
01 <script type="text/javascript"> 
02 // TODO: 定义 浮 点 数值 必须 使 用 小 数 点 和 至 少 一 位 小 数 
03 var vf = 16.8; // TODO: 定义 浮 点 数 
04 console. Log (T1608 = "Tv ft)s 
05 mar vy Es mw RE // TODO: 浮 点 数 加 法 运算 
06 eongoles lIog( L600 T1068 = EEE) 
07 var vi = 168; // TODO: 定义 整数 
08 var vi ET // TODO: 整数 和 浮 点 数 加 法 运算 
UE, eonsoles Login So Pel Gs 
10 var v str = "16.8"; // TODO: 定义 浮 点 数字 符 串 
11 var v f str=vV f+vV str; // TODO: 浮 点 数 和 浮 点 数字 符 串 加 法 运算 
1 eonsoleglool IG Gn 


1 se el oh 


关于 【代码 3-14】 的 分 析 如 下 : 

第 03 行 代 码 定义 了 第 一 个 变量 v_f， 并 初始 化 赋值 为 浮 点 数值 16.8。 这 里 需要 注意 一 点 ， 
ECMAScript 语法 规范 中 规定 在 定义 浮 点 数值 时 ， 必 须 使 用 小 数 点 和 小 数 点 后 至 少 一 位 小 数 。 

第 05 行 代码 定义 了 第 二 个 变量 vf f， 并 初始 化 赋值 为 两 个 浮 点 数 变量 v ff 相 加 的 和 。 

第 07 行 代码 定义 了 第 三 个 变量 vi， 并 初始 化 赋值 为 整数 值 168。 

第 08 行 代 码 定 义 了 第 四 个 变量 vi f 并 初始 化 赋值 为 整数 值 变 量 vi 和 浮 点 数 变量 vf 相 加 
的 和 。 

第 10 行 代 码 定义 了 第 五 个 变量 v str， 并 初始 化 赋值 为 字符 串 “16.8”。 

第 11 行 代码 定义 了 第 六 个 变量 vf str， 并 使 用 运算 符 “+” 将 其 初始 化 赋值 为 浮 点 数 变量 v_f 
与 字符 串 变 量 v_ str 连接 后 的 结果 。 

运行 页 面 ， 调 试 信息 如 图 3.14 所 示 。 

从 图 3.14 中 可 以 看 到 ， 第 06 行 代码 在 浏览 器 控制 台 窗 口中 输出 的 变量 v ff 的 内 容 为 33.6， 
下 是 两 个 浮 点 数 16.8 相 加 后 的 结果 。 第 09 行 代码 在 浏览 器 控制 台 窗 口中 输出 的 变量 v if 的 内 容 
为 184.8， 正 是 整数 168 和 浮 点 数 16.8 相 加 后 的 结果 ， 且 整数 与 浮 点 数 运算 后 上 自动 保存 为 浮 点 数 类 
型 。 
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Developer Tools - ECMAScript in 15-days - http://localhost:6334- 


[中 Inspect Conso Debugg Style Edit Performar Memol Netwo Storac 轩 ~" 园 目 窗 口 了 可 


兽 完 Filter output |_J Persist Logs 
| 16.8 = 16.8 ch@3-es-number-float.html:25:3 
16.8 + 16.8 = 33.6 ch03-es-number-float.html:27:3 
168 + 16.8 = 184.8 ch03-es-number-float.html:30:3 
16.8 + '16.8' = 16.816.8 ch93-es-number-fLoat.htmL:33:3 

> 


sassnsmsns nnnnasnsnses nnasasnsnsnsnsnasasnsnses mannnasnsnsnsnsnasnsarnsns manenasmsnsnsnsnasnsasmsnsnsnanasmsasmsnspanasasmsnsmsnsnasarnsnsnsnsnnsamsnsmsnaensrmtnsnsnsnnsmsmsnsnsnsnnsarmsasmssnasmsnsmsnsnsnnnaannsnsnanssnsasnsnsmsnsnanmnnsnsnsnsrarannsnsmsnsnatnsnsnsesnnnnnng 


图 3.14 Number 原始 类 型 ( 浮 点 数 ) 


另外 ， 第 12 行 代码 在 浏览 器 控制 台 窗 口中 输出 的 内 容 为 “16.816.8”， 这 明显 是 一 个 字符 串 
类 型 。 该 结果 表明 在 ECMAScript 语法 规范 中 ， 浮 点 数 与 字符 串通 过 运算 符 “+” 连 接 时 ， 浮 点 数 
会 被 当成 字符 串 来 处 理 ， 而 此 时 的 运算 符 “+” 不 再 是 加 法 运算 ， 而 是 字符 串 连接 运算 。 


3.5.7 Number 原始 类 型 科学 计数 法 


本 小 节 将 介绍 关于 Number 类 型 中 非常 大 或 非常 小 的 数值 。 一 般 采 用 科学 计数 法 来 表示 浮 点 
数 ， 具 体 说 就 是 把 一 个 很 大 或 很 小 的 数值 表示 为 数字 《包括 十 进 制 数字 ) 加 e (或 E) ， 后 面 加 乘 
以 10 的 需 。 
下 面 就 是 关于 Number 类 型 科学 计数 法 的 代码 示例 ( 详 见 源 代 码 ch03 目录 中 的 ch03-es-number- 
e.html 文件 ) 。 
【代码 3-15 】 


01 <script type="text/javascript"> 


02  // TODO: 科学 计数 法 使 用 e 加 上 10 的 倍数 来 表示 


03 var ve plus = 1.68e8; // TODO: 很 大 的 数 的 表示 方法 

04 console.log("1.68e8 = " + V_e plus); 

05 var ve neg .6 = 0.000000168; // TODO: 很 小 的 数 的 表示 方法 
06 console.1log("0.000000168 = "+Ve neg 6); 

07 var ve neg 5= 0.00000168; // TODO: 很 小 的 数 的 表示 方法 


08 console.log("0.000000168 = "+Ve neg 5); 
O09 < /AgoCript> 


关于 【代码 3-15】 的 分 析 如 下 : 

第 03 行 代码 定义 了 第 一 个 变量 v_e_plus， 并 初始 化 赋值 为 科学 计数 法 的 浮 点 数值 1.68e8。 

第 05 行 代码 定义 了 第 二 个 变量 v_e_neg_ 6， 并 初始 化 赋值 为 浮 点 数 数值 0.000000168， 这 是 一 
个 很 小 的 浮 点 数 。 

第 07 行 代码 定义 了 第 三 个 变量 vV_e_neg 5， 并 初始 化 赋值 为 浮 点 数 数值 0.00000168， 同 样 是 
一 个 很 小 的 浮 点 数 。 

注意 ， 变 量 ve_ neg 6 与 变量 ve neg5 的 区 别 就 是 小 数 点 后 的 前 导 0 的 个 数 不 同 ， 变 量 
ve neg 6 是 6 个 0， 变 量 V e neg 5 是 5 个 0。 

运行 页 面 ， 调 试 信息 如 图 3.15 所 示 。 第 04 行 代码 在 浏览 器 控制 台 窗 口中 输出 的 变量 v_e_plus 
的 内 容 为 168000000， 正 是 科学 计数 法 1.68e8 (1.68X10”) 通过 运算 后 的 结果 。 第 06 行 代码 在 浏 
览 器 控制 台 窗 口中 输出 的 变量 ve_neg 6 的 内 容 为 1.68e-7, 正 是 浮 点 数 0.000000168 转换 为 科学 计 
数 法 后 的 结果 。 第 08 行 代 码 在 浏览 器 控制 台 窗 口中 输出 的 变量 v e neg 5 的 内 容 并 没有 转换 为 科 
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学 计数 法 ， 这 是 因为 ECMAScript 语法 规定 ， 默 认 会 把 具有 6 个 或 6 个 以 上 前 导 0 的 浮 点 数 自动 转 
换 成 科学 计数 法 。 


Developer Tools - ECMAScript in 15-days - http://localh 





[a Inspec Cons Debug Style Er Perforr Mem Netw Storz 回 * 园 日 宗 日 加 


亲 时 Filteroutput _ | Persist Logs 
1.68e8 = 168006000 ch03-es-number-e.html:25:3 
| 0.0606066168 = 1.68e-7 chg3-es-number-e.html:27:3 
0.06006000168 = 6.96960168 ch03-es-number-e.html:29:;3 

>| 


Lr 


3.15 ”Number 原始 类 型 (科学 计数 法 ) 


3.6 ”Number 特殊 值 及 方法 


本 节 将 介绍 ECMAScript 语法 规范 中 为 Number 类 型 所 定义 的 特殊 值 及 方法 ， 有 些 特殊 值 及 方 
法 是 ECMAScript 6 语法 规范 中 新 增 的 。 


3.6.1 _ Number 最 大 值 与 最 小 值 


ECMAScript 语法 规范 中 为 Number 类 型 分 别 定 义 了 一 个 最 大 值 和 一 个 最 小 值 ， 具 体 就 是 
Number.MAX VALUE 和 Number.MIN VALUE 这 两 个 特殊 值 ， 其 分 别 定义 了 Number 值 集合 的 上 
下 界限 。 

根据 ECMAScript 语法 规范 中 的 描述 ， 所 有 定义 的 数值 都 必须 介 于 这 两 个 值 之 间 。 不 过 ， 如 果 
是 通过 计算 生成 的 数值 ， 就 可 以 不 在 这 两 个 值 之 间 。 

看 一 下 特殊 值 Number.MAX VALUE 和 Number.MIN VALUE 的 代码 示例 ( 详 见 源 代码 ch03 
目录 中 的 ch03-es-number-min-max.html 文件 ) 。 


【代码 3-16】 

01 <script type="text/javascript"> 

02 // TODO: Number 类 型 上 限 值 

03 console .1og ("Number 类 型 上 界限 : " + Number.MAX VALUE); 
04 // TODO: Number 类 型 下 限 值 

05 console .1og ("Number 类 型 下 界限 : " + Number.MIN VALUE); 


dem /oi 

关于 【代码 3-16】 的 分 析 如 下 : 

这 段 代 码 直 接 在 浏览 器 控制 台 窗 口中 输出 了 Number.MAX VALUE 和 Number.MIN VALUE 
这 两 个 特殊 值 的 内 容 。 

运行 页 面 ， 调 试 信息 如 图 3.16 所 示 。 浏 览 器 控制 台中 输出 了 特殊 值 Number.MAX _VALUE 和 
Number.MIN VALUE 的 具体 值 。 
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Developer Tools - ECMAScript in 15-days - http://localhost:63342/We 





[Ca Inspectc Consol Debugge Style Edit' Performan' Memor Networ Storag' 轩 " 园 目 容 日 可 


闪 时 Filter output _] Persist Logs 

Number 类 型 上 界限 : 1.7976931348623157e+368 chO3-es-number-min-max.html :24:3 

| Number 类 型 下 界限 : 5e-324 ch03-es-number-min-max.html:26:3 
i | 


bassnannnsnnsnasnasnannnnnannannannannannannannnnnnnnnnnnnnnnnnnnnnannnanananannananannnnnnnnannnnnnnnnnannannnnnnnannnnnnannannnnnanannnnanmannamnnmammnnnannnnnnnnnnnnnd 


图 3.16 Number 类 型 特殊 值 (上 下 界限 ) 


3.6.2 ”Number 无 穷 大 


根据 ECMAScript 语法 规范 中 的 描述 ， 当 通过 计算 生成 的 数值 大 于 Number.MAX_VALUE 时 ， 
其 会 被 赋予 特殊 值 Number.POSITIVE INFINITY， 该 值 表示 正 无 限 大 的 数值 ， 也 就 是 不 再 有 有 具体 
的 数值 。 同 样 地 ， 当 通过 计算 生成 的 数值 小 于 Number.MIN VALUE 时 ， 其 会 被 赋予 特殊 值 
Number.NEGATIVE_INFINITY， 该 值 表 示 负 无 限 大 的 数值 ， 同 样 也 是 不 再 有 具体 的 数值 。 当 通过 
计算 返回 的 是 无 穷 大 值 时 ， 该 值 也 就 不 能 再 用 于 其 他 计算 了 。 

男 外 ，ECMAScript 语法 规范 中 有 专用 值 表 示 正 无 穷 大 (Infinity〉 和 人 负 无 穷 大 (-Infinity〉。 事 
实 上 ，Number.POSITIVE_INFINITY 的 值 就 是 Infinity，Number.NEGATIVE_INFINITY 的 值 就 是 
-Infinity 。 

看 一 下 特殊 值 Number.POSITIVE_INFINITY 和 Number.NEGATIVE_INFINITY 的 代码 示例 ( 详 
见 源 代码 ch03 目录 中 的 ch03-es-number-posi-nega-infinity.html 文件 ) 。 

【代码 3-17】 


01 <script type="text/javascript"> 


02 // TODO: Number 类 型 正 无 穷 大 

03 console .log("Number .POSITIVE INFINITY ( 正 无 穷 大 ) : "); 
04 console.1log (Number .POSITIVE INFINITY); 

05 // TODO: Number 类 型 负 无 穷 大 

06 console .log("Number .NEGATIVE INFINITY ( 负 无 穷 大 ) : "); 
07 console.1og (Number .NEGATIVE INFINITY); 


0B < /seript> 


关于 【代码 3-17】 的 分 析 如 下 : 

这 上 段 代 码 直 接 在 浏览 器 控制 台 窗 口中 输出 了 Number.POSITIVE INFINITY 和 
NumberNEGATIVE INFINITY 这 两 个 特殊 值 的 内 容 。 

运行 页 面 ， 调 试 信息 如 图 3.17 所 示 。 浏 览 器 控制 台中 输出 了 特殊 值 Number.POSITIVE_INFINITY 
和 NumberNEGATIVE INEFINITY 的 具体 值 ， 分 别 是 特殊 值 正 无 穷 大 (Infinity ) 和 负 无 穷 大 

(-Infinity) 。 

无 穷 大 数 既 可 以 是 正 数 也 可 以 是 负数 ， 那 有 没有 办 法 快速 判断 出 一 个 数值 是 不 是 无 穷 大 呢 ? 
答案 是 肯定 的 。 在 ECMAScript 语法 规范 中 提供 了 一 个 isFinite() 函 数 方 法 ， 可 以 判断 一 个 数值 是 否 
为 无 穷 大 。 

看 一 下 通过 isFiniteO 函 数 方法 判断 数值 是 否 为 无 穷 大 的 代码 示例 〈 详 见 源 代 码 ch03 目录 中 的 
ch03-es-number-isInfinity.html 文件 ) 。 
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Developer Tools - ECMAScript in 15-days - http://localhost:6334 





[Ca Inspect Conso Debugc Style Edit Performar Memo Netwo Storac 团团 目 肉 日 可 


会 时 Filter output | Persist Logs 
| Number .POSITIVE INFINITY( 正 无 穷 大 ) : “posi-nega-infinity.html:24:3 
Infinity “posi-nega-infinity.html:25:9 
Number ,NEGATIVE_INFINITY( 负 无 穷 大 ) : “posi-nega-infinity.html :27:3 
-Infinity “posi-nega-infinity.html:28:9 

S| | 


3.17 Number 类 型 特殊 值 ( 无 穷 大 ) 
【代码 3-18】 


01 <script type="text/javascript"> 


02  // TODO: Number 类 型 --- isFinite() 方 法 判断 无 穷 大 
03 if(isFinite(1)) { 


04 consolee log (“lisPFinite(l) Tis nob TInfFindty "> 

US } else { 

06 consoles Iog ("iseEinite(ly Ts Tnrarity > 

由 及; } 

08 if(isFinite(Number.MAX VALUE)) { 

09 console.log("isFinite(Number .MAX VALUE) is not Infinity."); 

10 } else { 

1 console.log ("isFinite(Number .MAX VALUE) is Infinity."); 

1 } 

13 if(isFinite(Number.MAX VALUE * 2)) { 

14 console.log ("Number .MAX VALUE * 2 = " + Number.MAX VALUE * 2); 
3 console.log ("isFinite(Number .MAX VALUE * 2) is not Infinity."); 
16 } else { 

TD Console .log("Number .MAX VALUE * 2 = " + Number.MAX VALUE * 2); 
18 console.log("isFinite(Number .MAX VALUE * 2) is Infinity。") 
| 

20 if(isFinite!(Number. POSTLIVEREENETNIETIE)YIN 

2 了 console. 10g ("isrFinite(Number. POSTITIVPIINRINITY)N is not Tnfinity."): 
FA } else { 

2 局 console .log("isFinite(Number .POSITIVE INFINITY) is Infinity."); 
24 } 


EPE 


关于 【代码 3-18】 的 分 析 如 下 : 

这 段 代 码 通过 isFinite() 函 数 方 法 分 别 判断 数值 1、 特 殊 值 Number.MAX VALUE、 两 倍 的 特殊 
值 Number.MAX VALUE 和 特殊 值 Number.POSITIVE INFINITY 是 和 否 为 非 无 穷 大 。 

运行 页 面 ， 调 试 信息 如 图 3.18 所 示 。 数 值 1 为 非 无 穷 大 ， 特 殊 值 Number.MAX VALUE 同样 也 为 
非 无 穷 大 ， 而 两 倍 的 特殊 值 Number.MAX_VALUE 和 特殊 值 Number POSITIVE _INFINITY 则 为 无 穷 大 。 





Developer Tools - ECMAScript in 15-days - http://localhost:63342/Webstorm 


[a Inspector Console Debugger Style Editor Performance Memory Network Storage 上 加- 园 日 宗 日 口 


闸 是 Filter output | Persist Logs 
isFinite(1) is not Infinity. ch03-es-number-isInfinity.html :25:4 
isFinite(Number ,MAX VALUE) is not Infinity. ch03-es-number-isInfinity.html :30:4 
Number .MAX VALUE * 2 = Infinity ch83-es-number-isInfinity.html :38:4 
isFinite(Number ,MAX VALUE * 2) is Infinity. ch03-es-number-isInfinity.html :39:4 
isFinite{Number,POSITIVE INFINITY) is Infinity ， ch03-es-number-isInfinity.html:44:4 


3.18 Number 类 型 特殊 值 〈 判 断 是 否 为 非 无 穷 大 ) 


Si 


ECMAScript 从 零 开 始 学 ( 视频 教学 版 ) 


3.6.3” 非 数值 NaN 


这 里 还 要 特别 介绍 一 个 Number 类 型 特殊 值 一 一 NaN， 表 示 非 数值 (Not a Number) 。 在 
ECMAScript 语法 规范 中 ，NaN 是 一 个 非常 奇怪 的 特殊 值 。 特 殊 值 NaN 的 奇怪 之 处 就 是 其 与 自身 
逻辑 判断 上 是 不 相等 的 。 同 样 ，NaN 与 Infinity 都 是 不 能 用 于 算术 计算 的 。 男 外 ，ECMAScript 语 
法 规范 中 提供 了 一 个 isNaN() 函 数 方法 ， 可 以 用 于 判断 某 个 数据 类 型 是 否 为 非 数 值 。 

下 面 看 一 个 特殊 值 NaN 和 isNaN() 函 数 方法 的 代码 示例 ( 详 见 源 代码 ch03 目录 中 的 
ch03-es-isNaN.html 文件 ) 。 

【代码 3-19】 

01 <script type="text/javascript"> 

02 console.log("NaN is " + NaN); 


03 console.log("typeof NaN is " + typeof NaN); 
04 if(isNaN(NaN)) { 


0 console.log ("isNaN(NaN) return true."); 
06 } else { 

07 console.log ("isNaN(NaN) return false."):; 
08 } 

U9 ElsNaN(L23)) 1 

10 console.log("isNaN(123) return true."): 
Ll } else { 

有 console.log ("isNaN(123) return false."); 
1 | 

14 ESNaNWS LT2SCR 1 

I console. log ("isNaN("123"}) returzn true.")s 
16 } else { 

1 console.log("isNaN('123') return false."); 
be } 

19 1f(isNaN("abe yj 1 

20 Console log ("isNaN{('abeYy return true. "Ys 
2 } else { 

之 2 Console .log("isNaN('abc') return false."):; 
3 

24 if(NaN == NaN) { 

2 console.log("NaN == NaN return true."); 
26 } else { 

之 也 Console .log("NaN == NaN return false."); 
2 


WeCETPE> 


关于 【代码 3-19】 的 分 析 如 下 : 

第 02 行 代码 直接 在 浏览 器 控制 台 窗 口中 输出 了 特殊 值 NaN 的 内 容 。 

第 03 行 代码 通过 typeof 运算 符 对 特殊 值 NaN 进行 了 操作 ， 并 在 浏览 器 控制 台 窗 口中 输出 了 
运算 后 的 结果 。 

第 04 一 08 行 代码 通过 isNaN0 函 数 方 法 判断 特殊 值 NaN 是 否 为 非 数值 ， 并 根据 判断 结果 在 浏 
览 器 控制 台 窗 口中 输出 相应 的 信息 。 

第 09 一 13 行 代码 通过 isNaNO0 函 数 方法 判断 数值 123 是 否 为 非 数 值 ， 并 根据 判断 结果 在 浏览 
器 控制 全 窗口 中 输出 相应 的 信息 。 
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第 14 一 18 行 代 码 通过 isNaN() 函 数 方法 判断 字符 串 “123” 是 否 为 非 数 值 ， 并 根据 判断 结果 在 
浏览 器 控制 台 窗 口中 输出 相应 的 信息 。 

第 19 一 23 行 代码 通过 isNaN() 函 数 方 法 判断 字符 串 “abc” 是 否 为 非 数 值 ， 并 根据 判断 结果 在 
浏览 器 控制 台 窗 口中 输出 相应 的 信息 。 

第 24 一 28 行 代码 通过 if 语句 判断 特殊 值 NaN 目 身 是 否 为 逻辑 相等 ， 并 根据 判断 结果 在 浏览 
人 船 控制 人 台 窗 口中 输出 相应 的 信息 。 

运行 页 面 ， 调 试 信息 如 图 3.19 所 示 。 





Developer Tools - ECMAScript in 15-days - http: 
Inspe Cons Deb' Style Perfo Mem Netv Stor: 轩 " 园 上 日 窗口 了 可 


着 时 Filter output _ | Persist Logs 
NaN is NaN ch03-es-isNaN.html:23:3 
typeof NaN is number ch03-es-isNaN.html:24:3 

| isNaN(NaN) return true， chO3-es-isNaN,html :26:4 
isNaN(123) return false. ch03-es-isNaN,html :33:4 
isNaN("'123') return false. ch03-es-isNaN.html:38:4 
isNaN('abc’') return true. ch03-es-isNaN,html:41:4 
NaN == NaN return false. chO3-es-isNaN.html:48:4 

>| 


3.19 ”Number 类 型 特殊 值 (NaN) 


从 图 3.19 中 可 以 看 到 ， 第 03 行 代码 通过 typeof 运算 符 操 作 特 殊 值 NaN 后 结果 为 Number 类 
型 ， 这 与 NaN 的 定义 是 一 致 的 。 

第 04 一 08 行 代 码 通 过 isNaN() 函 数 方法 判断 特殊 值 NaN 是 否 为 非 数值 的 结果 为 true, 表示 NaN 
为 非 数 值 。 

第 09 一 13 行 代码 通过 isNaN() 函 数 方法 判断 数值 123 是 否 为 非 数 值 的 结果 为 false， 表 示 123 
为 不 是 非 数值 。 

第 14 一 18 行 代码 通过 isNaN(O 函 数 方法 判断 字符 串 “123” 是 否 为 非 数值 的 结果 为 flse， 表 示 
“123” 同 样 为 不 是 非 数值 。 

第 19 一 23 行 代码 通过 isNaN0 函 数 方 法 判断 字符 串 “abc” 是 人 奋 为 非 数 值 的 结果 为 ttue， 表 示 
“abc” 为 非 数 值 。 

第 24 一 28 行 代码 通过 让 语句 判断 特殊 值 NaN 自身 是 否 为 逻辑 相等 的 结果 为 false， 表 示 特 殊 
值 NaN 与 其 自身 逻辑 不 相等 ， 这 就 是 前 面 提 到 的 特殊 值 NaN 奇怪 之 处 的 测试 结果 。 


3.6.4 ”Number 安全 整数 值 


本 小 节 将 介绍 ECMAScript 6 语法 规范 中 新 增 的 一 组 特殊 值 一 一 安全 整数 值 。 安 全 整数 值 通过 
Number.MAX SAFE INTEGER 和 Number.MIN SAFE INTEGER 这 两 个 特殊 值 来 定义 。 

在 早期 版 本 的 ECMAScript 语法 规范 中 ， 整 数值 范围 为 -2^53~2^53〈 注 意 是 闭 区 间 )〉 ， 如 果 超 
出 这 个 范围 就 无 法 精确 表示 。ECMAScript 6 语法 规范 中 新 增 的 安全 整数 值 就 是 为 了 表示 这 两 个 界 
限 值 。 

另外 ,ECMAScript 6 语法 规范 为 了 配合 安全 整数 值 的 使 用 还 新 增 了 一 个 Number.isSafeInteger() 
国 数 方法 ， 用 于 判断 整数 值 是 否 在 安全 整数 值 范围 内 。 
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看 一 下 安全 整数 值 的 代码 示例 〈 详 见 源 代码 ch03 目录 中 的 ch03-es-safe-integer.html 文件 ) 。 
【代码 3-20】 


01 <script type="text/javascript"> 


02 SOSRESEETCEO 

03 // TODO: Number 类 型 上 限 值 

04 console .10g ("Number 类 型 安全 值 上 界限 : " + Number.MAX SAFE INTEGER); 
05 if (Number.MAX SAFE INTEGER == Math.pow(2, 53) - 1) 

06 console .1og ("Number .MAX SAFE INTEGER == Math.pow(2, 53) - 1"); 
07 else 

08 console.log ("Number .MAX SAFE INTEGER != Math.pow(2, 53) - 1"); 
09 // TODO: Number 类 型 下 限 值 

10 console .10g ("Number 类 型 安全 值 下 界限 : " + Number.MIN SAFE INTEGER); 
el if (Number .MIN SAFE INTEGER == 1 -~ Math.pow(2, 53)) 

有 be console .log ("Number .MIN SAFE INTEGER == 1 - Math.pow(2, 53)"); 
| else 

14 console .log("Number .MIN SAFE INTEGER != 1 - Math.pow(2, 53)"); 
15 // TODO: Number.isSafeInteger() 方法 用 于 判断 是 否 在 安全 值 范围 内 

16 if (Number.isSafeInteger (Math.pow(2, 53))) 

1 console.log ("Math.pow(2, 53) is a safe Integer."); 

18 else 

19 console.log ("Math.pow(2, 53) is not a safe Integer."); 

20 if (Number .isSafeInteger (Math.pow(2, 53) - 1)) 

wa console.log("Math.pow(2, 53) - 1 is a safe Integer."); 

芝 必 else 

3 console.log("Math.pow(2, 53) ~- 1 is not a safe Integer."); 


EC 


关于 【代码 3-20】 的 分 析 如 下 : 

第 04 行 和 第 10 行 代码 在 浏览 器 控制 台中 输出 了 Number.MAX SAFE INTEGER 和 
Number.MIN _ SAFE INTEGER 这 两 个 安全 整数 值 的 内 容 。 

第 05 一 08 行 和 第 11 一 14 行 代 码 通 过 让 条 件 判 断 语 名 分别 测试 了 
Number.MAX SAFE INTEGER 和 Number.MIN SAFE _ INTEGER 这 两 个 安全 整数 值 与 界限 值 -2^53 
和 2^53 的 逻辑 关系 。 

第 16 一 19 行 和 第 20 一 23 行 代码 分 别 测试 了 如 何 使 用 新 增 的 Number.isSafeInteger(0) 尔 数 方法 判 
断 某 个 整数 值 是 否 在 安全 整数 值 范围 内 。 

运行 页 面 ， 调 试 信息 如 图 3.20 所 示 。 


Developer Tools - ECMAScript in 15-days - http://localhost:63342/We 
a Inspectc Consol Debugge Style Editr Performan Memor Networ Storag' 轩 " 园 日 窜 日 可 





夯 时 Filter output _ | Persist Logs 
Number 类 型 安全 值 上 界限 : 9667199254746991 che3-es-safe-integer.html:25:9 
Number .MAX SAFE INTEGER == Math.pow(2, S53) - 1 ch03-es-safe-integer.html:27:13 
Number 类 型 安全 值 下 界限 : -9667199254740991 ch@3-es-safe-integer.html:31:9 
Number .MIN SAFE INTEGER == 1 - Math.pow(2, S53) ch03-es-safe-integer.html:33:13 
Math.pow(2, 53) is not a safe Integer. ch03-es-safe-integer.html:40:10 
Math,.pow(2, 53) - 1 is a safe Integer. ch03-es-safe-integer.html:42:13 

>| | 


3.20 Number 类 型 特殊 值 〈 安 全 整数 值 ) 
从 图 3.20 中 可 以 看 到 ， 浏 览 器 控制 台中 输出 了 安全 整数 值 Number.MAX_SAFE_INTEGER 和 
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Number.MIN_SAFE INTEGER 的 具体 值 。 同 时 ， 通 过 安全 整数 值 Number.MAX SAFE INTEGER 
和 Number.MIN SAFE INTEGER 与 界限 值 -2^*53 和 2^53 的 逻辑 判断 结果 ， 可 以 得 出 
Number.MAX SAFE INTEGER 和 Number.MIN SAFE INTEGER 与 界限 值 -2^53 和 2^53 的 关系 。 
另外 ， 通 过 使 用 Number.isSafeInteger0 尔 数 方 法 可 以 判断 出 某 个 整数 值 是 耕 在 安全 整数 值 
Number.MAX SAFE INTEGER 和 Number.MIN_SAFE INTEGER 范围 内 。 


3.6.5 Number.EPSILON 





本 小 节 将 介绍 一 个 ECMAScript 6 语法 规 邯 中 新 增 的 特殊 值 一 一 Number.EPSILON。EPSILON 
用 于 描述 极 小 的 常量 ， 目 的 是 为 浮 点 数 运 算 设 置 一 个 误差 范围 ， 因 为 浮 点 数 运算 是 不 精确 的 。 

看 一 下 Number.EPSILON 的 代码 示例 〈 详 见 源 代 人 码 ch03 目录 中 的 ch03-es-number-EPSILON.html 
文件 ) 。 


【代码 3-21 】 

01 <script type="text/javascript"> 

02 "nage atrict 

0 攻 1 console.log ("Number.EPSILON = " + Number .EPSILON); 

04 console.log ("Number .EPSILON = " + Number .EPSILON.toFixed(16)); 

Qs SoonsolesLlog(loor 02 ST Tl Et Oy) 

06 GOSOLOS TOGN(TUS IE O02 — 03 = 0203) 

QF consoles log("0 IT O02 03 = 0 PO PO20 0 3 torixzad(lloy): 


0 /seripl> 


关于 【代码 3-21】 的 分 析 如 下 : 

第 03 行 代码 尝试 输出 Number.EPSILON 极 小 常量 的 具体 值 。 

第 04 行 代码 尝试 输出 将 Number.EPSILON 极 小 常量 转换 为 固定 16 位 的 小 数 后 的 具体 值 。 

第 05 一 07 行 代 码 进行 了 一 个 简单 的 浮 点 数 运算 测试 。 

运行 页 面 , 调试 信息 如 图 3.21 所 示 。 从 第 05 一 07 行 代码 输出 的 结果 可 以 证 明 浮 点 数 的 运算 存 
在 不 精确 的 问题 。 





Developer Tools - ECMAScript in 15-days - http://localhost:63342/We 


[Ca Inspectc Consol Debugge Style Editr Performan Memor Networ Storag 轩辕 日 宗 口 林 


闸 时 Filter output | Persist Logs 
Number.EPSILON = 2.226446649256313e-16 ch93-es-number-EPSILON.htmtL:24:3 

| Number.EPSILON = 6.6699696666966662 ch93-es-number-EPSILON.htmtL:25:9 
6.1 + 9.2 = 6.36669669669966664 ch93-es-number-EPSILON.htmt:26:9 

0.1 + 6.2 - 6.3 = 5.551115123125783e-17 ch93-es-number-EPSILON.htmt:27:9 

0.1 + 9.2 - 9.3 = 6.99966966669669661 ch93-es-number-EPSILON.htmtL:28:9 


321 _ Number EPSILON (1) 


因此 ，ECMAScript 6 语法 规范 中 引入 Number.EPSILON 特殊 值 的 目的 ， 就 是 为 了 验证 浮 点 运 
算 结果 的 精确 性 .如 果 浮 点 运算 结果 的 误差 小 于 Number.EPSILON, 我 们 就 认为 运算 结果 是 正确 的 。 

看 一 下 通过 Number.EPSILON 验证 浮 点 运算 结果 是 否 正 确 的 代码 示例 〈 详 见 源 代码 ch03 目录 
中 的 ch03-es-number-EPSILON-validate.html 文件 ) 。 
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【代码 3-22】 

01 <script type="text/javascript"> 

02 ose steleen, 

U3 ConseolerlLodg (ULE EO 2 U0 Sie TO (UI U2 0 

04 if((0.1 + 0.2 -0.3) < Number.EPSILON) 

05 CONnsolo To 0 T7052 — 0 3 = "(OD P0220.3) "ss correcte nT) 

06 else 

07 eoOnsoler iol 证 


(01: oho 


关于 【代码 3-22】 的 分 析 如 下 : 

这 段 代 码 主要 通过 将 浮 点 运算 结果 的 误差 值 与 Number.EPSILON 进行 比较 ， 若 小 于 则 证 明 浮 
点 运算 结果 是 正确 的 。 

运行 页 面 ， 调 试 信息 如 图 3.22 所 示 。 从 第 05 行 代码 输出 的 结果 可 以 证 明 浮 点 运算 结果 (0.1 + 
0.2 -0.3=5.551115123125783e-17) 是 正确 的 。 


Developer Tools - ECMAScript in 15-days - http://localhost:63342/Webstorm 





中 Inspector Console Debugger Style Editor Performance Memory Network Storage 轩 " 园 目 肉 口 了 0 


兽 是 Filter output _ | Persist Logs 
0.1+ 6.2 - 9.3 = 5.551115123125783e-17 .Number-EPSILON-validate.html:24:9 
| 0.1+0.2 - 9.3 = 5.551115123125783e-17 is correct. .number-EPSILON-validate.html:26:7 


3.22 Number.EPSILON (2) 


3.7 ”String 原始 类 型 





本 市 将 介绍 ECMAScript 语法 规范 中 的 第 5 种 原始 类 型 
ECMAScript 5 种 原始 类 型 中 比较 重要 的 一 种 。 


String。 String 类 型 同样 也 是 


3.7.1 String 原始 类 型 介绍 


从 通俗 意义 上 来 说 ，String 类 型 也 就 是 字符 串 类 型 。String 与 前 几 种 原始 类 型 的 区 别 在 于 ， 它 
是 唯一 一 种 没有 固定 大 小 的 原始 类 型 ， 也 就 是 说 可 以 用 字符 串 存储 0 或 更 多 的 Unicode 字符 
(Unicode 是 一 种 国际 通用 字符 集 标 准 ， 又 称 统 一 字符 编码 ) 。 

String 类 型 字符 串 中 的 每 个 字符 都 有 固定 的 位 置 ， 首 字符 从 位 置 标 记 0 开始 ， 第 二 个 字符 在 位 
置 标记 1 处 ， 以 此 类 推 。 因 此 ， 字 符 串 中 的 最 后 一 个 字符 的 位 置 标记 一 定 是 字符 串 的 长 度 减 去 1。 


3.7.2 ”定义 String 原始 类 型 


在 ECMAScript 语法 规范 中 ， 规 定 String 类 型 字符 串 是 通过 双 引 号 〈") 或 单 引 号 〈") 来 定义 
声明 的 。 该 声明 方式 与 Java 语言 是 有 区 别 的 ，Java 语言 必须 使 用 双 引 号 〈") 来 定义 声明 字符 串 ， 
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使 用 单 引 号 (7 定义 声明 的 仅仅 是 字符 。 而 ECMAScript 语法 规范 中 恰恰 没有 定义 字符 这 个 概念 ( 字 
符 也 被 认为 是 字符 串 ) ， 所 以 在 定义 声明 字符 串 时 既 可 使 用 双 引 号 〈") ， 也 可 以 使 用 单 引 号 〈") 。 

下 面 看 第 一 个 关于 定义 String 原始 类 型 的 代码 示例 ( 详 见 源 代码 ch03 目录 中 的 
ch03-es-string-define.html 文件 ) 。 


【代码 3-23 】 

01 <script type="text/javascript"> 

02 var V_ str a = "Hello ECMAScript!"; 
JS console.log(v str al) : 

04 var V_ St b = "Hello "ECMAScript!'"; 
05 console. Log(v IgEr Dp)e 

06 Var v str c = "Hello “ECMAScript!"'; 
07 console. log (v Str° oe)s; 


00m /screlipt> 


关于 【代码 3-23】 的 分 析 如 下 : 

第 02、04 和 06 行 代码 分 别 通 过 var 关键 字 定 义 了 3 个 变量 : v_ stra、v_ str b 和 v str c， 并 
分 别 初始 化 了 不 同 的 字符 串 。 其 中 , 在 第 04 行 和 第 06 行 代码 初始 化 的 字符 串 中 , 演示 了 如 何在 定 
义 字 符 串 时 以 髓 套 方式 使 用 双 引 号 《")〉 和 单 引 号 (') 。 

运行 页 面 ,调试 信息 如 图 3.23 所 示 。 如 果 我 们 想 输 出 带 有 双 引 号 〈") 和 单 引 号 (') 的 字符 串 ， 
那么 在 定义 字符 串 时 必须 以 髓 套 方式 将 双 引 号 《") 或 单 引 号 〈") 加 进去 。 





Developer Tools - ECMAScript in 15-days - http://localhost:63342/ 


[a Inspectc Consol Debugg' Style Edit Performan Memor Networ Storag " 轩 上 日 崔 日 gfI 


曾 时 Filter output |_ | Persist Logs 
| Hello ECMAScript! ch03-es-string-define.html:24:9 
Hello 'ECMAScript!' ch03-es-string-define,.html:26:9 
Hello "ECMAScCcript!”" ch03-es-string-define.html:28:3 

六 | 


3.23 定义 String 原始 类 型 


3.7.3 ”字符 串 连 接 


在 ECMAScript 语法 规范 中 ， 规 定 可 以 通过 运算 符 〈+) 实现 字符 串 的 连接 操作 ， 这 也 是 比较 
简便 的 字符 串 连 接 方 式 。 

看 一 下 字符 串 连接 的 代码 示例 ( 详 见 源 代码 ch03 目录 中 的 ch03-es-string-link.html 文件 ) 。 

【代码 3-24】 

01 <script type="text/javascript"> 

02 var Vv str a = "Hello"; 

0U3 var vstr D = "RCMA"; 

0 var wistele = OCPLpEY 

U5 Conaolee laoglrv st a " "tv atr Div otr or rin) 

53SEeipb> 

关于 【代码 3-24】 的 分 析 如 下 : 

这 段 代 码 演示 了 如 何 进 行 字符 串 的 连接 操作 。 如 果 打 算 输 出 “Hello ECMAScript!” 这 样 的 字 
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符 串 ， 具 体 做 法 如 下 : 

第 02 一 04 行 代码 通过 var 关键 字 定 义 了 3 个 变量 : v_str a、v_str_ b 和 v_str c， 并 分 别 初始 化 
了 字符 串 〈"Hello" "Ecma" 和 "Script") 。 

第 05 行 代码 通过 运算 符 “+” 将 3 个 变量 (Vv str a、vV str b 和 v str c) 进行 了 连接 操作 。 同 
时 ， 在 第 一 个 和 第 二 个 变量 之 间 插 入 了 空格 〈" ") 字符 串 ， 在 第 三 个 变量 后 面 插入 了 标点 符号 字 
符 串 〈"!") ， 然 后 在 浏览 器 控制 台 窗 口中 进行 了 输出 。 

运行 页 面 ， 调 试 信息 如 图 3.24 所 示 。 使 用 运算 符 “+” 就 可 以 有 效 地 对 字符 串 进 行 连接 操作 ， 
这 个 操作 方式 在 具体 设计 中 十 分 有 用 。 

Developer Tools - ECMAScript in 15-days - http://localhost:63: 
[Ca Inspect Consc Debugc Style Edi Performa Memo Netwo Storac 轩 ~ 轩 日 窗 口 了 可 





从 时 Filter output | Persist Logs 
Hello ECMAScript! ch03-es-string-link.html:26:3 


TT 


beeensesneesnennnesnnnsnesnesnnennnnn nn 


图 3.24 字符 串 连 接 


3.7.4 ”特殊 字符 串 


在 ECMAScript 语法 规范 中 定义 了 一 些 特殊 的 字符 串 , 这 些 特殊 字符 串 在 某 些 特定 环 境 下 非常 
有 用 。ECMAScript 语法 规范 中 定义 的 一 些 特殊 字符 串 详 见 表 3.1。 


表 3.1 ECMAScript 特殊 字符 串 





看 一 个 使 用 String 类 型 特殊 字符 串 的 代码 示例 ( 详 见 源 代码 ch03 目录 中 的 ch03-es-string-spec.html 
Xt) 

【代码 3-25】 

0 <=script typeo="text/iavascript"> 

02 var vv str a= "Hello"s 

3 var vstr D 人 了 世人 MA 

O04 var vgtr el = SC 

05 conadla. Lod{lv Str a + MN Mn Fw ate DT "Nn Fw tr OT ME 

UG /aeripe> 


关于 【代码 3-25】 的 分 析 如 下 : 
这 段 代 人 码 演 示 了 如 何 使 用 String 类 型 特殊 字符 串 ， 第 05 行 代码 中 通过 插入 多 个 特殊 字符 串 
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(MbWn"、 "nNr"、"tIMN") 进行 了 字符 串 的 连接 操作 ， 然 后 在 浏览 器 控制 台 窗 口中 进行 了 输出 。 
运行 页 面 ， 调 试 信息 如 图 3.25 所 示 。 使 用 特殊 字符 串 就 可 以 实现 空格 、 换 行 及 添加 标点 符号 


的 效果 ， 


这 在 具体 设计 中 是 非常 实用 的 。 





Developer Tools - ECMAScript in 15-days - http://local 
Ca Insper Cons Debuc Style E Perforr Mem Netw Storz 轩 " 园 目 崔 口 了 可 


从 是 Filter output [_ | Persist Logs 
Helilod' me5-String-spec.html:26:3 
ECMA” 

Script '!\ 
> 


Paeseeaasanesaasasnnsaaaasanssnaassnasaaasasaneaaaaaannasaaasananasaaassnaaaaannssaaaansenaaaaaasansaaaaanasaaanasnsnaaaaansssaaaasnenaaaanaaseaaasannssasaasnsaaaaannsaaaasaneaaaasaanasnnnaaaaanaaaaaaanansaaasanneaaaananesaaaaanenaaaansd 


3.25 “特殊 字符 串 


3.7.5 ”获取 字符 串 长 度 


在 ECMAScript 语法 规 苑 中 ， 规 定 通过 String 类 型 的 “length” 属 性 可 以 获取 字符 串 的 长 度 。 
下 面 看 一 下 获取 String 类 型 字符 串 长 度 的 代码 示例 〈 详 见 源 代 码 ch03 目录 中 的 
ch03-es-string-length.html 文件 ) 。 


【代码 3-26 】 
01 <script type="text/javascript"> 
02 var VStre = "Hollo ECMAScCPIDpE!S 
03 console.log(v str.length); 
04qvare vi = 123; 
05 coonsole. Log(y TelengEh)s 
06 var V null = null; 
07 console.log(v null.length); 
O08 <Ascript> 


关于 【代码 3-26】 的 分 析 如 下 : 

第 02 行 代码 通过 var 关键 字 定 义 了 第 一 个 变量 v_str， 并 初始 化 赋值 了 一 个 字符 串 。 

第 03 行 代码 通过 “length” 属 性 获取 了 字符 串 变 量 v_str 的 长 度 。 

第 04 行 代码 通过 var 关键 字 定 义 了 第 二 个 变量 vi， 并 初始 化 赋值 了 一 个 整数 数值 。 

第 05 行 代 码 试图 通过 “length” 属 性 获取 整数 变量 vi 的 长 度 。 定 义 这 行 代 码 的 目的 就 是 想 测 
试 一 下 “length” 属 性 是 否 对 Number 类 型 的 变量 有 效 。 

第 06 行 代码 通过 var 关键 字 定 义 了 第 三 个 变量 v_ null， 并 初始 化 赋值 了 null 原始 值 。 

第 07 行 代码 试图 通过 “length” 属 性 获取 整数 变量 v_null 的 长 度 。 同 样 ， 定 义 这 行 代码 的 日 
的 也 是 想 测试 一 下 “length” 属 性 是 否 对 Null 类 型 的 变量 有 效 。 

运行 负面， 调试 信息 如 图 3.26 所 和 示 。“length” 属 性 对 于 字符 串 是 有 效 的 ， 而 对 于 Number 类 
型 数值 是 无 效 的 〈 即 使 可 以 使 用 “length” 属 性 ) 。 另 外 ， 如 图 3.26 中 箭头 所 指 ， 对 Null 类 型 使 
用 “length” 属 性 是 会 报错 的 (提示 变量 类 型 为 null) ， 这 一 点 需要 设计 人 员 在 使 用 “length” 属 性 
时 加 以 注意 。 


65 


ECMAScript 从 零 开 始 学 ( 视频 教学 版 ) 





Developer Tools - ECMAScript in 15-days - http://localhost:63342/Wi' 


Ca Inspectc Consol Debugge Style Edit Performan Memor Networ Storag 半 " 园 日 交口 可 


俏 时 Filter output _|Persist Logs 
17 ch93-es-string-Length .htmti24;:3 

| undefined ch03-es-string-length.html:26:3 
AP TypeError: v null is null [Learn More]l ch03-es-string-length.html:28:3 





图 3.26 获取 字符 串 长 度 


3.7.6 字符 的 Unicode 编码 表示 


在 ECMAScript 语法 规范 中 , 一般 字符 内 部 是 通过 Unicode 编码 (\u0000 一 \uFFFF ) 来 表示 的 。 
同时 ，String 类 型 还 定义 了 charAt(O 和 charCodeAtO 两 个 方法 来 实现 对 字符 的 操作 。 
下 面 先 看 一 个 使 用 字符 Unicode 编码 的 代码 示例 〈 详 见 源 代码 ch03 目录 中 的 
ch03-es-string-unicode.html 文件 ) 。 
【代码 3-27】 


01 <script type="text/javascript"> 


02 ome ste 

03 var Vv str unicode = "Nu7F16\u7RA0B"; // TODO: define unicode String 
04 console.1og("\\u7F16\\u7TAO0B : " + V str unicode); 

05 console.log("\u7F16\u7AO0B length : " + Vv str unicode.length); 

06 console.log("charAt (0) : " + V str unicode.charAt (0)); 

Wu console.log("charCodeAt (0) : " + Vv str unicode.charCodeAt (0)); 

08 Cnsolesiog enarace :TVISECEUUITICOOeoscnaraCILJ 

y9 console.log("charCodeAt (1) : " + V str unicode.charCodeAt (1)); 


Om 


关于 【代码 3-27】 的 分 析 如 下 : 

第 03 行 代码 通过 Unicode 编码 方式 定义 了 一 个 String 类 型 变量 v_str_unicode。 

第 04 和 第 05 行 代码 输出 了 字符 串 变量 v_str_unicode 的 汉字 内 容 ， 通 过 “length” 属 性 获取 了 
字符 串 变 量 v_str_ unicode 的 长 度 。 

第 06~09 行 代 码 分 别 通 过 charAt0 和 charCodeAt() 方 法 获取 了 字符 串 变 量 v_ str unicode 的 单个 
字符 及 其 十 进 制 编码 。 

运行 页 面 ， 调 试 信息 如 图 3.27 所 示 。 通 过 Unicode 编码 方式 定义 的 字符 串 变 量 v_str_unicode 
的 内 容 为 汉字 “编程 ”。 同 时 ，charAt(O 方 法 依次 获取 了 单个 汉字 字符 ，charCodeAt(0 方 法 获取 了 汉 
字 字 符 编 码 的 十 进 制 数值 。 

早期 ECMAScript 语法 规范 中 的 编码 仅仅 满足 于 〈\u0000~\uFFFF ) 这 个 范围 ， 对 于 识别 超出 

QuFFFF) 范围 的 编码 会 出 现 问题 , 均 是 通过 两 个 双 字 节 的 变通 表示 方式 来 实现 的 。 为 了 解决 上 述 

问题 ， 在 ECMAScript 6 语法 规范 中 新 增 了 通过 大 插 号 〈({}) 形式 来 识别 超出 〈\uFFFF) 范 围 的 编 
码 。 

下 面 再 看 一 个 使 用 32 位 Unicode 字符 编码 的 代码 示例 〈 详 见 源 代码 ch03 目录 中 的 ch03-es- 
string-unicode-32.html 文件 ) 。 
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Developer Tools - ECMAScript in 15-days - http://localhost:6 


a Inspeci Conso Debug Style Ed Performzs Memc Netwc Stora 加 7- 园 日 半日 口 


人 曾 时 Filter output _] Persist Logs 
\u7F16\u7A66 : 编程 ~es-Sstring-unicode.html :25:9 
编程 Length : 2 ~es-string-unicode.html :26:9 
charAt(0) : 编 ~e5-String-unicode.html :27:9 
charCodeAt(0) : 32534 ~e5-String-unicode.html:28:9 
charAt(1) : 程 ~e5-String-unicode.html :29:9 
charCodeAt(1) : 31243 -es-string-unicode.htmt:30:9 

古 一 一 一 一 一 一 一 一 A A RA 


【代码 3-28】 


01 <script type="text/javascript"> 


0 这 Te strlen 

03 console.1og ("ECMAScript 打印 UCS-4 字符 : \u{20BFF}"); 

04 Var Vv_str unicode = "\u20BFF"; 

05 console.1log("\\u20BFF : " + Vv str unicode); 

06 consoles log(l chaat (0 wstrunieode charAet0y): 

07 console.log("charCodeAt (0) : " + V_ str unicode.charCodeAt (0) .toSstring(16)); 
08 eonsoles log( "eharaAt (DD "Pv stre unicode charAG ye 

09 console.1log ("charCodeAt(1) : " + v str unicode.charCodeAt (1) .toString(16)); 


OM < /cel 


关于 【代码 3-28】 的 分 析 如 下 : 

第 04 行 代码 通过 Unicode 编码 方式 定义 了 一 个 String 类 型 变量 v_ str_ unicode， 并 初始 化 赋值 
为 “\u20BFF”【〔 本 意 是 想 定义 一 个 特殊 的 汉字 “HF”) 。 这 里 需要 特别 注意 的 是 ， 该 Unicode 编 
码 范 围 超 出 了 (CuFFFF ) ， 严 格 来 讲 这 是 一 个 32 位 Unicode 字符 (官方 定义 属于 UCS-4 字符 ， 关 
于 UCS-4 及 其 相关 概念 ， 读 者 可 参考 有 关 编码 的 文档 了 解 一 下 ) 。 

第 06 一 09 行 代 码 分 别 通过 charAt0 和 charCodeAt(0 方 法 ， 获 取 了 字符 串 变量 V_str unicode 的 
单个 字符 及 其 十 六 进 制 编码 。 

运行 页 面 ， 调 试 信息 如 图 3.28 所 示 。 如 图 3.28 中 箭头 所 指 ， 第 05 行 代码 输出 的 字符 与 预想 
的 完全 不 同 ， 这 是 因为 字符 编码 “\u20BFF” 无 法 被 旧版 本 的 ECMAScript 语法 规范 正确 识别 〈 仅 
能 识别 16 位 Unicode 字符 ) ， 所 以 第 05 行 代码 输出 了 “\u20BF” 和 “F” 的 字符 组 合 ， 而 “\u20BF” 
根本 不 是 一 个 有 效 的 汉字 字符 。 同 时 , 这 个 结果 通过 第 06 一 09 行 代码 定义 的 charAt0 和 charCodeAtO) 
方法 也 得 到 了 印证 。 


Developer Tools - ECMAScript in 15-days - http://localhost:63342/W 





Ca Inspectc Consol Debuggt Style Edit Performan' Memor Networ Storag 半 " 轩 日 窗 唱 可 


会 时 Filter output | Persist Logs 

| ECMAScript 打印 UCS-4 字符 : 耽 "es5-String-unicode-32.html :24:3 
Nu26BFF : OF -es-string-unicode-32.htmt:26:9 
charAt(6) : 口 -es-string-unicode-32.htmt:27:9 
charCodeAt(6) : 20bf -es-string-unicode-32.htmt:28:9 
charAt(1) : F ~es-string-unicode-32.html:29:9 
charCodeAt(1) : 46 -es-string-unicode-32.htmt:30:9 

p> 


3.28 特殊 字符 Unicode 表示 (1) 
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那么 ,旧版 本 的 ECMAScript 语法 规范 如 何 解决 【代码 3-28】 中 出 现 的 无 法 正确 识别 字符 的 问 
题 呢 ? 解决 方法 就 是 将 Unicode 编码 的 32 位 字符 转换 为 16 位 字符 。 下 面 继续 看 一 个 代码 示例 〈 详 
见 源 代 码 ch03 目录 中 的 ch03-es-string-unicode-32.html 文件 ) 。 


【代码 3-29】 

01 <script type="text/javascript"> 

02 USserstzeact 

03 console.1log("ECMRScript 打印 UcS-4 字符 : \u{20BFF}"); 

04 var V_Str_ unicode 16 = "\uD842\uDFFF"; 

05 console.1og("\\uD842\\uDFFF : " + Vv str unicode 16); 

06 Sonsole log("charAt(0) "Py gtrunicode lcharat (0))> 

ON console.log("charCodeAt(0) : " + Vv str unicode 16.charCodeAt(0).toString(16)); 
08 Sonsoleslogl eharAEll)y 7 Pyetronicooden io charaAt (ll) 


9 console.log("charCodeAt(1) : " + V_ str unicode 16.charCodeAt(1) .toString(16)); 
TOM /seept> 


关于 【代码 3-29】 的 分 析 如 下 : 
第 04 行 代码 通过 Unicode 编码 方式 定义 了 一 个 String 类 型 变量 v str unicode 16, 并 初始 化 赋 
值 为 “\uD842\uDFFF ”将 32 位 编码 “\u20BF” 转 换 为 了 16 位 编码 ) 。 
第 06 一 09 行 代码 分 别 通过 charAtO0 和 charCodeAt( 方 法 获取 了 字符 串 变 量 V str unicode 16 的 
单个 字符 及 其 十 六 进 制 编码 。 
运行 页 面 ， 调 试 信息 如 图 3.29 所 示 。 第 05 行 代 码 输 出 了 正确 的 汉字 字符 ， 这 是 因为 字符 编码 
“\uD842\uDFFF” 能 够 被 旧版 本 的 ECMAScript 语法 规范 正确 识别 。 





Developer Tools - ECMAScript in 15-days - http://localhost:63342/W 


[a Inspectc Consol Debugg' Style Edit Performan' Memor Networ Storag 回 * 园 日 交口 可 


便 时 Filteroutput Persist Logs 
ECMAScript 打 Eh UCS-4 字符 : 咏 -es-string-unicode-32.htmtL:24:3 
\uD842\uDFFF ; 了 咏 "es-string-unicode-32.html:32:9 
charAt(6) ; 口 me5-String-unicode-32,html:33:9 
charCodeAt(0) : d842 "es-Sstring-unicode-32.html:34:9 
charAt(1) : 口 “es-string-unicode-32.html:35:9 
charCodeAt(1) : dfff “es-String-unicode-32.html:36:9 


3.29 特殊 字符 Unicode 表示 (2) 


目前 ，ECMAScript 6 语法 规范 有 效 地 解决 了 【代码 3-28】 中 出 现 的 无 法 正确 识别 字符 的 问题 。 
解决 方法 其 实 很 简单 ， 就 是 使 用 大 括号 〈f) 将 32 位 的 Unicode 字符 编码 包含 进去 。 

另外 ，ECMAScript 6 语法 规范 中 还 新 增 了 一 个 codePointAt(0 方 法 ， 用 于 识别 32 位 的 Unicode 
字符 编码 ， 解 决 了 charAt() 和 charCodeAt() 方 法 只 能 识别 16 位 Unicode 字符 编码 的 问题 。 

下 面 看 一 个 在 ECMAScript 6 语法 规范 下 使 用 Unicode 字符 编码 的 代码 示例 ( 详 见 源 代码 ch03 
目录 中 的 ch03-es-string-unicode-32.html 文件 ) 。 

【代码 3-30】 

01 <script type="text/javascript"> 

02 USGSEETCE。 

03 console.1log("ECMRScript 打印 UCS-4 字符 : \u{20BFF}"); 

04 TREE SEEIUPTCOORE 2 Nl20BEe) > 


05 console.1log("\\{u20BFF} : ”+ v str unicode 32); 
06 consoles loglmcharAt (Om str unicod 32.cnarat(0) > 
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07 console.log("charCodeAt (0) : " + V_ str unicode 32.charCodeAt (0) .toSstring(16)); 
08 console。 log ("charAt\(1) >" Fy strunicogde 32.charAt(l))s; 

US console.log("charCodeAt(1) : " + Vv str unicode 32.charCodeAt (1) .toString(16) ) ; 
10 consolenlog( "codePpointAE(0N :ry Str nicode 32 C0dePointAt(0) .EoString(Li6))s 
Cripe> 


关于 【代码 3-30】 的 分 析 如 下 : 

第 04 行 代码 通过 Unicode 编码 方式 定义 了 一 个 String 类 型 变量 v_str_unicode 32, 并 初始 化 赋 
值 为 “uu{20BFF}”【〔 使 用 大 插 写 〈({}) 将 32 位 编码 包含 进去 ) 。 

第 06 一 09 行 代码 分 别 尝试 通过 charAt0 和 charCodeAt0 方 法 获取 了 字符 串 变 量 
v_str_ unicode 32 的 单个 字符 及 其 十 六 进 制 编码 。 

运行 页 面 ， 调 试 信 息 如 图 3.30 所 示 。 第 05 行 代码 输出 了 正确 的 汉字 字符 ， 这 是 因为 字符 编码 

“\u{20BFF}” 能 够 被 ECMAScript 6 语法 规范 正确 识别 。 和 第 06 一 09 行 代码 定义 的 charAtO0 和 

charCodeAt0 方 法 无 法 有 效 识 别 32 位 的 Unicode 字符 编码 “\uf20BFF}”， 而 第 10 行 代码 定义 的 
codePointAt(0 方 法 能 够 成 功 识 别 “\u{f20BFF}” 编 码 。 


Developer Tools - ECMAScript in 15-days - http://localhost:63342/W 
中 Inspectc Consol Debugg' Style Edit Performan' Memor Networ Storag 回 - 园 日 宁 日 口 





亲 是 Filter output (| Persist Logs 
ECMAScript 打印 UCS-4 字符 : 顺 .es-string-unicode-32.htmtL:24;:3 

| \{u26BFF} : 了 咏 -es-string-unicode-32.htmt:38:9 

charAt(9) : 口 
charCodeAt(0) 

charAt(1) : 口 
charCodeAt(1) : dfff 

codePointAt(0) : 20bff 


“es-string-unicode-32.html :39:9 
-es-string-uUunicode-32.htmL:46;:9 
-es-string-unicode-32.htmt:41:9 





: d842 





-es-string-uUunicode-32.htmt:42:9 
-<es-string-uUnicode-32.htmL:43;:9 


PTT TT 


3.30 ”特殊 字符 Unicode 表示 (3) 


在 前 面 几 个 代码 示例 中 介绍 了 如 何 将 Unicode 字符 编码 进行 正确 有 效 的 输出 。 那 么 能 不 能 直接 
从 十 六 进 制 数值 编码 来 获取 汉字 字符 呢 ? ECMAScript 语法 规范 中 定义 了 一 个 fromCharCode() 方 
法 , 用 于 识别 16 位 的 十 六 进 制 数值 编码 , 但 该 方法 无 法 正确 获取 32 位 的 十 六 进 制 数值 编码 。 不 过 ， 
ECMAScript 6 语法 规范 中 新 增 了 一 个 fomCodePoint() 方 法 ， 用 于 识别 32 位 的 十 六 进 制 数值 编码 。 

下 面 看 一 个 直接 通过 十 六 进 制 数 值 编码 来 获取 汉字 字符 的 代码 示例 〈 详 见 源 代 但 ch03 目录 中 
的 ch03-es-string-from-unicode.html 文件 ) 。 


【代码 3-31 】 

01 <script type="text/javascript"> 

02 mar le 

03 console.log ("ECMAScript --- String.fromCharCode () 方 法 ") ; 

04 console.1og("\\u7F16\\u7A0B : " + String.fromCharCode (0x7F16，0x7RAOB) ) ; 
05 console.1log("\\u20BFF : " + String.fromCharCode (0x20BFF) ) ; 

06 console.log ("ECMAScript 6 --- String.fromCodePoint() 方 法 "); 

07 console.log("\\u20BFF : " + String.fromCodePoint (0x20BFF)); 


0 ee sles 


关于 【代码 3-31】 的 分 析 如 下 : 
第 04 行 代 码 通过 fromCharCode() 方 法 将 16 位 Unicode 字符 编码 "\uD842\uDFFF" 转 换 为 汉字 字符 。 
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第 05 行 代码 通过 fomCharCode() 方 法 尝试 将 32 位 Unicode 字符 编码 "\u20BFF" 转 换 为 汉字 字 
符 。 

第 07 行 代码 通过 fromCodePoint0 方 法 将 32 位 Unicode 字符 编码 wu20BFF" 转 换 为 汉字 字符 。 

运行 页 面 ， 调 试 信息 如 图 3.31 所 示 。 





Developer Tools - ECMAScript in 15-days - http://localhost:63342/Websk: 


中 ”Inspectol Console Debugge Style Edito Performanc Memon Networl Storage 轩 " 轩 日 窗 日 可 


从 时 Filter output _| Persist Logs 
| ECMAScript --- String.fromCharCode() 方 法 “~es-string-from-unicode.html:24:3 
\u7F16\u7A6B : 编程 -es-string-from-uUunicode .htmt:25:9 
\u20BFF : 口 Re es5-string-from-unicode.html:26:9 
ECMAScript 6 --- String,.fromCodePoint() 方 法 -~es-string-from-unicode.htmt:27:9 
\u28BFF : 蚁 es-string-from-unicode ,htmt:28;9 
S| 


日 
rr 


3.31 获取 特殊 汉字 字符 Unicode 编码 


如 图 3.31 中 箭头 所 指 ， 第 04 行 代码 通过 fromCharCode0 方 法 输出 了 正确 的 汉字 字符 ， 而 第 
05 行 代码 fomCharCode() 方 法 却 无 法 输出 正确 的 汉字 字符 ， 这 是 因为 fomCharCode() 方 法 无 法 正 
确 识别 32 位 的 十 六 进 制 数值 编码 (0x20BFF) 。 

第 07 行 代 码 通过 使 用 ECMAScript 6 语法 规范 中 新 增 的 fomCodePoint(0 方 法 正确 地 将 32 位 十 
六 进 制 数 值 编码 (0x20BFF) 转换 为 了 汉字 字符 。 


3.8 本草 小 结 


本 章 主要 介绍 了 ECMAScript 语法 规范 中 关于 值 与 类 型 的 知识 ， 包 括 原 始 值 与 引用 值 、5 种 主 
要 原始 类 型 及 其 新 特性 等 方面 的 内 容 , 并 通过 一 些 具 体 实例 进行 了 讲解 。 希望 读者 通过 对 本 章 内 容 
的 学 习 ， 能 够 打 好 ECMAScript 脚本 语言 开发 的 基础 。 


70 





类 型 转换 


本 章 将 介绍 ECMAScript 类 型 转换 方面 的 相关 知识 ， 特 别 是 ECMAScript 6 语法 规范 中 关于 类 
型 转换 的 新 知识 点 ， 这 部 分 内 容 属于 ECMAScript 脚本 语言 语法 中 比较 重要 的 部 分 。 


4.1 转换 为 字符 串 


本 节 将 介绍 ECMAScript 语法 规范 中 转换 字符 串 的 方法 ,在 ECMAScript 语法 规范 中 提供 了 一 
个 toString(argumenb) 国 数 方法 ， 用 于 实现 转换 成 字符 串 的 功能 ， 该 方法 适用 于 Boolean 原始 类 型 、 
Number 原始 类 型 和 String 原始 类 型 的 原始 值 。 


4.1.1 toString() 函 数 方法 的 语法 格式 


ECMAScript 语法 规范 中 提供 的 toString(argument) 国 数 方法 用 于 实现 将 Boolean 原始 类 型 、 
Number 原始 类 型 和 String 原始 类 型 等 数据 类 型 转换 为 字符 串 形式 。 

关于 toString(argumenb) 图 数 方法 的 语法 说 明 如 下 : 

toString (argument) ; // TODO: 用 于 实现 转换 成 字符 串 的 功能 

其 中 ，“argument” 参 数 是 可 选 的 ， 当 需要 转换 成 特殊 类 型 的 字符 串 时 ， 可 以 通过 定义 该 参数 


4.1.2 ”使 用 默认 toString() 函 数 方法 


在 应 用 toString(argument) 函 数 方 法 时 ， 常 用 的 是 默认 不 之 “argument” 参 数 的 形式 。 
下 面 看 一 段 使 用 默认 toString() 函 数 方法 实现 转换 为 字符 串 操 作 的 代码 示例 ( 详 见 源 代码 ch04 
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目录 中 的 ch04-es-toString-default.html 文件 ) 。 
【代码 4-1 】 


01 <script type="text/javascript"> 


02 Var Vv Str = "toSstringt(ty™"; 

03 Console .log(v str.toString()); 
04 Mar vnt 23 

05 console> log(v Int toString()): 
06 var Veloat — T123123> 

07 console.log(v float.toString()); 
08 var VD 七 = true; 

09 eonsole. Log (vb Ee toOString() 
10 Var vb f = false; 

J econsole. Tog(v ort COSEeEing(lhe 
1 var Vv null = null; 

3 consoles log (vw nul toString()); 


TA /eript> 


关于 【代码 4-1】 的 分 析 如 下 : 

第 02 行 代 码 定义 了 一 个 字符 串 变 量 v_str， 并 初始 化 赋值 了 字符 串 “toString0”。 第 03 行 代 
码 应 用 toString() 函 数 方法 将 变量 v_str 转换 为 字符 串 ， 此 处 读者 可 能 会 有 一 点 疑问 ， 既 然 变 量 v_str 
已 经 初始 化 为 字符 串 了 ， 还 可 以 使 用 toString0 函 数 方法 再 次 转换 为 字符 串 类 型 么 ? 答案 是 肯定 的 ， 
ECMAScript 语法 规范 允许 这 样 的 操作 ， 因 为 String 类 型 本 身 是 原始 类 型 ， 定 义 的 变量 是 伪 对 象 ， 
自然 就 支持 toString0 函 数 方法 。 

第 04 行 代码 定义 了 一 个 Number 类 型 变量 v int， 并 初始 化 赋值 了 数值 123。 第 05 行 代 码 尝 试 
应 用 toString() 函 数 方法 将 变量 Vv_int 转换 为 字符 串 。 

第 06 行 代 码 定义 了 一 个 浮 点 数 类 型 变量 v_ float， 并 初始 化 赋值 了 浮 点 数值 123.123。 第 07 行 
代码 尝试 应 用 toString0 函 数 方法 将 变量 v_float 转换 为 字符 串 。 

第 08 行 和 第 10 行 代码 分 别 定 义 了 两 个 布尔 型 变量 , 并 分 别 初始 化 赋值 为 Boolean 类 型 的 原始 
值 true 和 false。 第 09 行 和 第 11 行 代码 尝试 应 用 toString() 函 数 方 法 将 Boolean 变量 转换 为 字符 串 。 

第 12 行 代 码 定义 了 一 个 Null 类 型 变量 v_ null， 并 初始 化 赋值 了 Null 类 型 的 原始 值 Cnull) 。 
第 13 行 代 码 应 用 toString() 函 数 方法 将 Null 类 型 变量 v_null 转换 为 字符 串 。 定 义 这 两 行 代码 的 目的 
是 测试 一 下 Null 类 型 是 否 支 持 toString() 函 数 方法 的 操作 。 

运行 【代码 4-1】 所 定义 的 HTML 页 面 ， 并 使 用 调试 器 查看 控制 台 输 出 的 调试 信息 ， 页 面 效 
果 如 图 4.1 所 示 。 





Developer Tools - ECMAScript in 15-days - http://localhost:63342/Webstorn 


[Ca Inspector Console Debugger Style Editor Performance Memory Network Storage 轩 " 园 四 内 日 可 


闪 | 守 Filter output | Persist Logs 
tostringf ) ch04-es-toString-default.html :24:3 

123 ch@4-es-toString-default,.html:26:9 

| 123.123 ch64-es-toSstring-defautt.htmLi;28:9 
true ch04-es-toString-default.html :30:3 
false ch04-es-toString-default.html :32:3 

A TypeError: v null is null [LLearn Morel ch04-es-toString-default,html :34:3 





图 4.1 默认 toString() 函 数 方法 
如 图 4.1 所 示 ， 对 String 类 型 数据 应 用 toString() 函 数 方法 后 返回 的 仍 是 原 字符 串 的 内 容 ， 对 
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Number 类 型 数据 应 用 toString(O) 国 数 方法 后 返回 的 是 数值 的 内 容 ， 对 Boolean 类 型 应 用 toString() 函 
数 方法 后 返回 的 是 true 或 false 原始 值 。 

另外 ， 如 图 4.1 中 箭头 所 指 ， 如 果 尝 试 对 Null 类 型 应 用 toString0 函 数 方法 ， 就 会 返回 类 型 错 
误 的 提示 信息 ， 说 明 Null 类 型 是 不 文 持 toString(0) 函 数 方法 的 。 


4.1.3 Number 类 型 数值 转换 为 字符 串 


toString0 国 数 方 法 币 用 的 应 用 场景 就 是 将 各 种 Number 类 型 数值 转换 为 字符 串 格 式 。 
下 面 看 一 段 使 用 toString0 函 数 方法 将 各 种 Number 类 型 数值 转换 成 字符 串 的 代码 示例 〈 详 见 
源 代 码 ch04 目录 中 的 ch04-es-toString-num.html 文件 ) 。 
【代码 4-2 】 


01 <script type="text/javascript"> 


02 Var we = 235 

03 console, log( 123 toString()'=° Ty11,toSstring(Q): 
04 Tar Vas2 em 2 

1] console. Log ll 123 COSEeing() = v2 CoCrungl): 
06 var voE l= 123.0: 

07 console Iog( T2365U EoSstring(y Tv El toString(ly)s 
08 var vf 2 = 123%123: 

09 CoONnSolem og Lo 123 ECONGPLING()E ESEEE2REOSCPTTOIUN > 
10 var VIOct = 0123: 

Ji consoles Logq( 0123 EoStreang(y = TOCESEOSEEIn9U 

1 var Vv hex = 0x123; 

3 eonsoles loo("0xi23 toString(y Ne toString())s 
14 var v e = 123e6; 

bs console Log( "12360 toString() = "7 Pv es tostring())s 


To </seript> 


关于 【代码 4-2】 的 分 析 如 下 : 

第 02 一 05 行 代码 测试 了 对 正 整 数 和 负 整 数 应 用 toString() 函 数 方 法 的 结果 。 
第 06 一 09 行 代码 测试 了 对 浮 点 数 应 用 toString0 函 数 方 法 的 结果 。 

第 10 一 11 行 代码 测试 了 对 八进制 数 应 用 toString() 函 数 方法 的 结果 。 

第 12 一 13 行 代 码 测试 了 对 十 六 进 制 数 应 用 toString() 函 数 方法 的 结果 。 

第 14 一 15 行 代码 测试 了 对 指数 应 用 toString0 函 数 方法 的 结果 。 

运行 页 面 ， 调 试 信息 如 图 4.2 所 示 。 





Developer Tools - ECMAScript in 15-days - http://localhost:6334.: 
Ca Inspect Conso Debugg Style Edit Performar Memol Netwo Storac 团 " 轩 日 窗口 了 可 


闸 富 Filter output _ J Persist Logs 
123 toString() = 123 ch04-es-toString-num,html :24:3 
-123 toString() = -123 ch04-es-toString-num.htmil :26:3 
123.0 toString() = 123 ch04-es-toString-num,html :28:3 
123.123 toString() = 123.123 ch04-es-toString-num,html :30:;3 
0123 toString() = 83 ch04-es-toString-num,html:32:9 
Ox123 toString() = 291 ch04-es-toString-num.html:34:9 
123e6 toString() = 123006669 ch04-es-toString-num.html :36:3 

> 


sneerneeneensensensensensen nn nn mm nt 


4.2 Number 类 型 数值 转换 为 字符 串 
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从 图 42 中 可 以 看 到 ， 对 负 整 数 应 用 toString() 函 数 方法 ， 负 号 (-) 也 会 被 当 作 字 符 串 来 处 理 。 
对 浮 点 数 应 用 toString0 函 数 方法 , 返回 的 仍 是 原 浮 点 数 的 内 容 ( 浮 点 数 123.0 会 自动 省 略 小 数 
点 后 的 0) 。 
对 八进制 和 十 六 进 制 数值 应 用 toString0 函 数 方法 ， 会 先 转换 为 十 进 制 数值 ， 然 后 转换 为 字符 串 。 
对 使 用 科学 计数 法 的 数值 应 用 toString0 函 数 方法 ， 会 先 转换 为 完整 长 度 的 数值 ， 然 后 转换 为 
字符 串 。 


4.1.4 ”使 用 带 参数 的 toString() 函 数 方法 


toString0 图 数 方法 还 有 一 种 带 参 数 的 使 用 方式 ， 通 过 定义 “argument” 参 数 可 以 实现 将 数值 转 
换 为 相应 进 制 数 的 字符 串 形式 。 
下 面 看 一 段 使 用 toString(argument) 函 数 方法 将 Number 类 型 数值 分 别 转换 成 为 二 进 制 、 八 进 制 
和 十 六 进 制 字 符 串 的 代码 示例 〈 详 见 源 代码 ch04 目录 中 的 ch04-es-toString-argument.html 文件 ) 。 
【代码 4-3 】 


01 <script type="text/javascript"> 


02 Tse Sterict ns 

HE Var VE 2 ml 

04 console .1og ("十 进 制 数值 : 15.toString(2) = "+ vi 2.toSstring(2)); 

05 var v b 2 = 0b1111; 

06 console .1og ("二 进 制 数值 : 0b1111.toString(10) =" + vb 2.tostring(10)); 
07 var vl on 0603 

08 console .1og ("十 进 制 数值 : 63.tostring(8) = "+ vi 8.tostring(8)); 

NS var vo 8= 0077; 

10 console .1og ("八进制 数值 : 0o77 .toString(10) = "+ vo 8.toSstring(10)); 
11 Var Vv Lolo = 2I9 

12 console .1og ("十 进 制 数值 : 255.toString(16) = " + vi 16.toString(16)) ; 
13 var v h 16 = 0xff; 

14 console .109g ("十 六 进 制 数值 : 0xff.toString(10) = "+vh 16.toString(10) ) ; 


To /Cripkt> 


关于 【代码 4-3】 的 分 析 如 下 : 

第 03 行 代码 定义 了 第 一 个 变量 v i 2， 并 初始 化 赋值 了 十 进 制 数值 15。 

第 04 行 代码 应 用 toString(2) 函 数 方法 将 变量 v_ i 2 转换 为 二 进 制 字 符 串 ， 其 中 参数 “2” 表 示 
转换 为 二 进 制 字符 串 。 

第 05 行 代码 定义 了 第 二 个 变量 v_b 2， 并 初始 化 赋值 了 二 进 制 数值 0b1111。 

第 06 行 代 码 应 用 toString(10) 函 数 方法 将 变量 vb 2 转换 为 字符 串 ， 其 中 参数 “10” 表 示 转 换 
为 十 进 制 字 符 串 。 

第 07 行 代码 定义 了 第 三 个 变量 vi 8， 并 初始 化 赋值 了 十 进 制 数值 63。 

第 08 行 代码 应 用 toString(8) 函 数 方法 将 变量 v i 8 转换 为 八进制 字符 串 ， 其 中 参数 “8” 表 示 
转换 为 八进制 字符 串 。 

第 09 行 代码 定义 了 第 四 个 变量 v o 8， 并 初始 化 赋值 了 八进制 数值 0077。 

第 10 行 代码 应 用 toString(10) 函 数 方法 将 变量 v_o 8 转换 为 字符 串 ， 其 中 参数 “10” 表 示 转 换 
为 十 进 制 学 符 串 。 
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第 11 行 代码 定义 了 第 五 个 变量 v i 16， 并 初始 化 赋值 了 十 进 制 数值 255。 

第 12 行 代 码 应 用 toString(16) 函 数 方法 将 变量 v i 16 转换 为 十 六 进 制 字符 串 ， 其 中 参数 “16?” 
表示 转换 为 十 六 进 制 字 符 串 。 

第 13 行 代 码 定 义 了 第 六 个 变量 v h 16， 并 初始 化 赋值 了 十 六 进 制 数值 0xff。 

第 14 行 代码 应 用 toString(10) 函 数 方法 将 变量 v_h_16 转换 为 十 进 制 字 符 串 ， 其 中 参数 “10?” 
表示 转换 为 十 进 制 字符 串 。 

运行 页 面 ， 调 试 信息 如 图 4.3 所 示 。 





Developer Tools - ECMAScript in 15-days - http://localhost:63342/Webstorm 


[a Inspector Console Debugger Style Editor Performance Memory Network Storage 回 -* 园 日 字 日 口 


苗 守 Filteroutput Persist Logs 
十 进 制 数值 : 15.toString(2) = 1111 ch04-es-toString-argument.html :25:3 
| 二 进 制 数值 : 6b1111.toString(16) = 15 
十 进 制 数值 : 63.toString(8) = 77 
八进制 数值 : 6077.toString(16) = 63 
十 进 制 数值 : 255.toString(16) = ff 
十 六 进 制 数值 : 9xff.,toStringf16) = 255 


兴国 折光 


ch04-es-toString-argument.html:27:3 
ch04-es-toString-argument.html :29:3 
ch04-es-toString-argument.html :31:3 
ch04-es-toString-argument.html :33:3 


chO4-es-toString-argument.html :35:3 


4.3” 带 参数 的 toString() 方 法 


从 图 4.3 中 可 以 看 到 ， 十 进 制 数 值 15 对 应 的 二 进 制 数值 正 是 1111， 十 进 制 数 值 63 对 应 的 八 
进 制 数值 正 是 0077， 十 进 制 数值 255 对 应 的 十 六 进 制 数值 正 是 0xff。 

男 外 ， 对 于 默认 的 toString() 函 数 方法 ， 其 实 是 与 toString(10) 函 数 方法 一 致 的 ， 只 不 过 十 进 制 
参数 10 可 以 省 略 。 


4.2 ”转换 为 数值 


本 节 将 介绍 ECMAScript 语法 规范 中 ， 把 非 数 字 的 原始 值 转 换 为 数值 的 两 种 方法 : parseInt() 
和 parseFloat()。parseInt() 方 法 用 于 将 值 转换 为 整数 ，parseFloat() 方 法 用 于 将 值 转换 为 浮 点 数 。 


4.2.1 ”parselnt() 函 数 方 法 的 语法 格式 


ECMAScript 语法 规范 中 定义 了 parseInt0 函 数 方法 , 用 于 实现 将 String 原始 类 型 的 原始 值 转换 
为 整数 形式 。 

关于 parseIntO 图 数 方法 的 语法 说 明 如 下 : 

ParseInt (strArg, [baseArg]); // TODO: 用 于 实现 转换 为 整数 数值 的 功能 

“strArg” 参 数 是 必须 的 ， 表 示 用 于 转换 的 String 类 型 原始 值 ; “baseArg” 参 数 是 可 选 的 ， 用 
于 指定 “strArg” 参 数 的 基数 《〈 进 制 数 ) 。 

另外 ，parseIntO 国 数 方法 在 执行 转换 操作 前 ， 均 会 分 析 判 新“strArg” 参 数字 符 串 的 格式 。 有 具 
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体 方 法 是 依次 得 看 “strArg” 参 数 每 个 位 置 处 的 字符 ， 判 断 其 是 否 是 一 个 有 效 数 字 ， 直 到 最 后 一 个 
位 置 的 字符 ，parseInt(O) 图 数 方法 将 把 “strArg” 人 参数 字符 串 转 换 为 数字 。 即 使 某 个 位 置 出 现 非 有 效 
数字 ，parseInt() 方 法 也 会 将 该 字符 之 前 的 字符 串 转 换 为 数字 。 但 如 果 首 字符 为 非 有 效 数 字 字 符 ， 那 
么 parseInt() 方 法 会 返回 NaN， 并 不 再 继续 执行 后 续 操作 。 


4.2.2 ”转换 为 整数 数值 


ECMAScript 语法 规范 中 的 parseInt() 函 数 方法 用 于 实现 将 String 类 型 原始 值 转换 为 整数 类 型 数 
值 ， 而 对 于 一 些 非 String 类 型 原始 值 的 操作 会 返回 NaN。 

下 面 看 一 个 使 用 parseInt0 函 数 方法 将 字符 串 转 换 为 数字 的 代码 示例 ( 详 见 源 代码 ch04 目录 中 
的 ch04-es-parseInt.html 文件 ) 。 


【代码 4-4】 

01 <script type="text/javascript"> 

02 Suse strlen 

中 必 1 var vl ParSernti i123 

04 console.log ("parseInt(\"123\") = "+ Vv i); 

05 var vf = parseInt( 123.123"); 

06 eonsole log(Mparsetne(\i i233 T1230 = OE 

07 Var Vv hex = parseInt ("Oxff"); 

08 console.log ("parseInt(\"Oxff\") = " + V hex); 

9 var v1 str = parselnt ("1l23abe™)s 

10 consoles log(rparseltnb( Ml230BDeNe = 0 vlogtr): 
la TaiTESEEEI = parseInE( SELL23 > 

1 be console log lparselnt (NV str1i23N = Pystee)s 
13 var v 七 = parseInt (true); 

14 console.log ("parseInt(\"true\") = "+ TV 七 ): 


lp 


关于 【代码 4-4】 的 分 析 如 下 : 
第 03 行 代 人 码 定义 了 第 一 个 变量 v_i， 并 初始 化 赋值 了 通过 parseInt("123") 方 法 将 整数 字符 串 转 
换 为 数字 的 返回 值 。 
第 05 行 代码 定义 了 第 二 个 变量 v_f 并 初始 化 赋值 了 通过 parseInt("123.123") 方 法 将 浮 点 数字 
符 串 转换 为 数字 的 返回 值 。 
第 07 行 代码 定义 了 第 三 个 变量 v_hex, 并 初始 化 赋值 了 通过 parseInt("0xff') 方 法 将 十 六 进 制 字 
符 串 转换 为 数字 的 返回 值 。 
第 09 行 代码 定义 了 第 四 个 变量 v_ i str， 并 初始 化 赋值 了 通过 parseInt("123abc") 方 法 将 字符 串 
("123abc") 转换 为 数字 的 返回 值 。 
第 11 行 代码 定义 了 第 五 个 变量 v_str i， 并 初始 化 赋值 了 通过 parseInt("str123") 方 法 将 字符 串 
("str123") 转换 为 数字 的 返回 值 。 
第 13 行 代 码 定 义 了 第 六 个 变量 v_ t， 并 初始 化 赋值 了 通过 parseInt(true) 方 法 将 布尔 值 (true) 
转换 为 数字 的 返回 值 。 
运行 页 面 ， 调 试 信息 如 图 4.4 所 示 。 


76 


第 4 章 类 型 转换 





Developer Tools - ECMAScript in 15-days - http://locall 
[a Insper Cons Debuc Style E Perforr Mem Netw Storz 团 " 园 日 肉 日 可 


着 是 Filter output Persist Logs 
| parseInt("123") = 123 ch94-es-parseInt .html:25:3 
parseInt("123.123") = 123 ch04-es-parseInt.html:27:3 
parseInt( "Oxff") = 255 ch64-es-parseInt .htmtLi291;3 了 
parseInt("123abc") = 123 ch64-es-parseInt .htmL;311;3 
parseInt("strl23") = NaN ch04-es-parseInt.html :33:3 
parseInt("true") = NaN ch04-es-parseInt.html:35:9 


weet nt te ttt te tt tt tt te 


! 
> 


4.4 ”parseInt() 函 数 方法 转换 为 整数 


从 图 4.4 中 可 以 看 到 , 第 04 行 和 第 06 行 代码 输出 的 结果 表明 , 对 于 应 用 parseInt0 函 数 方法 进 
行 转换 的 字符 串 ， 如 果 是 数值 类 型 的 , 无 论 是 整数 类 型 还 是 浮 点 数 类 型 的 字符 串 , 返回 的 均 是 整数 
类 型 。 因 为 parseInt0 函 数 方法 不 能 识别 小 数 点 (.) ， 所 以 parseInt0 函 数 方法 会 自动 舍弃 浮 点 数 中 
小 数 点 后 面 ( 包 含 小 数 点 ) 的 数值 。 

第 08 行 代 码 输出 的 结果 表明 ， 如 果 字 符 串 定义 成 十 六 进 制 形 式 的 字符 串 ，parseInt() 函 数 方法 
是 能 够 识别 出 来 的 ， 并 按照 十 六 进 制 数值 换算 成 十 进 制 数值 进行 返回 。 

第 10 行 代码 输出 的 结果 表明 ， 如 果 字 符 串 定义 成 类 似 “123abc” 了 字符 串 的 形式 ，parseInt() 函 
数 方法 是 能 够 识别 出 来 前 面 数 值 的 ， 并 将 识别 出 来 的 数值 进行 返回 。 这 是 因为 parseInt0 函 数 方法 
按照 从 前 至 后 的 顺序 依次 识别 字符 串 中 的 字符 , 一 旦 遇 到 字符 串 中 字符 为 非 数 字 , 就 会 马上 终止 执 
行 ， 并 将 已 经 识别 的 数字 【本 例 为 123) 进行 返回 。 

第 12 行 代 码 输 出 的 结果 表明 ， 如 果 字 符 串 定义 成 类 似 “str123” 字 符 串 的 形式 ，parseInt() 函 数 
方法 会 认为 是 无 效 字 人 符 串 ， 并 返回 原始 值 NaN。 

第 14 行 代码 输出 的 结果 表明 ，parseInt() 函 数 方法 是 无 法 操作 布尔 类 型 值 的 ， 对 于 布尔 值 会 返 
回 原 始 值 NaN。 


4.2.3 ”转换 指定 基数 的 整数 数值 


ECMAScript 语法 规范 中 的 parseInt0 函 数 方法 还 有 一 种 基数 方式 ,可 以 用 于 实现 将 二 进 制 、 八 
进 制 十 六 进 制 或 其 他 任何 进 制 的 String 类 型 原始 值 转换 为 整数 类 型 数值 .而 基数 则 是 通过 parseIntO 
图 数 方法 的 第 二 个 参数 baseArg 来 指定 的 。 

下 面 看 一 个 使 用 parseInt0 函 数 方法 基数 方式 转换 为 数字 的 代码 示例 ( 详 见 源 代码 ch04 目录 中 
的 ch04-es-parseInt-baseArg.html 文件 ) 。 


【代码 4-5】 

01 <script type="text/javascript"> 

02 bl sk eh ste 

03 var von2 = TE 

04 console.log("parseInt(11, 2) = " + parseInt(v i 2, 2)); 

05 var vases = Ti: 

06 console log("pargseIint(i7i 8) = HF parseint (vw IMB. 8)): 

07 Var Vi lo = FF" 

08 console.log ("parseInt(ff, 16) = " + parseInt(v i 16, 16)); 


U9 </seript> 


关于 【代码 4-5】 的 分 析 如 下 : 


Eh 
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这 段 代码 使 用 了 和 带 参 数 的 parseInt0 函 数 方法 ， 可 以 将 字符 串 转 换 为 按照 参数 (2、8、16) 定 
义 的 二 进 制 、 八 进 制 和 十 六 进 制 数 。 

第 03 和 第 04 行 代码 定义 了 第 一 个 变量 v_i 2, 并 初始 化 赋值 了 数值 11, 并 通过 parseInt(v_i 2， 
2) 方 法 将 数值 11 指定 为 二 进 制 数 。 

第 05 和 第 06 行 代码 定义 了 第 二 个 变量 v_i_8, 并 初始 化 赋值 了 数值 77, 并 通过 parseInt(v_i_8%， 
8) 方 法 将 数值 77 指定 为 八进制 数 。 

第 07 和 第 08 行 代码 定义 了 第 三 个 变量 vi 16, 初始化 赋值 了 字符 串 "ff', 并 通过 parseInt(v_i_16,， 
16) 方 法 将 字符 串 "ff' 指 定 为 十 六 进 制 数 。 

运行 页 面 ,调试 信息 如 图 4.5 所 示 。 使 用 了 基数 方式 的 parseInt0 国 数 方法 ,可 以 将 第 一 个 参数 
定义 的 目标 值 按照 第 二 个 参数 指定 的 进 制 进行 转换 。 
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[Ca Inspec Consc Debug Style Ed Perform: Memc Netwr Stora 思 ~ 园 日 肉 日 可 


会 时 Filter output (| Persist Logs 
parseInt(11, 2) = 3 “parseInt-baseArg.html:25:3 
parseInt(77, 8) = 63 "~parseInt-baseArg.html:27:3 
parseInt(ff, 16) = 255 "parseInt-baseArg.html:29:;3 

i 


4.5 ”parseInt() 方 法 基数 方式 


男 外 ， 对 于 上 默认 的 parseInt0 函 数 方法 ， 其 实 是 省 略 了 第 二 个 参数 (指定 为 十 进 制 》 的 ， 也 就 
是 说 parseInt() 函 数 方 法 默认 是 按照 转换 为 十 进 制 数 来 操作 的 。 


4.2.4 ”parseFloat() 函 数 方 法 的 语法 格式 


ECMAScript 语法 规范 中 定义 了 parseFloatO 图 数 方法 ， 用 于 实现 将 String 原始 类 型 的 原始 值 转 
换 为 浮 点 数 形式 。 

关于 parseFloat() 印 数 方法 的 语法 说 明 如 下 : 

parseFloat (strArg); // TODO: 用 于 实现 转换 为 浮 点 数 的 功能 


其 中 ，“strArg” 参 数 是 必需 的 ， 表 示 用 于 转换 的 String 类 型 原始 值 。 

parseFloat() 方 法 与 parseInt(0) 方 法 的 处 理 方式 相似 ， 从 首位 置 字符 开始 依次 查看 每 个 字符 ， 直 
到 找到 第 一 个 非 有 效 的 字符 为 止 ， 然 后 把 该 字符 之 前 的 字符 串 转换 为 浮 点 数 〈 或 整数 ) 。 男 外 ， 
parseFloat() 方 法 也 没有 类 似 parseInt() 方 法 的 基数 方式 。 

对 于 parseFloat() 方 法 来 说 有 一 点 特殊 之 处 ， 就 是 第 一 个 出 现 的 小 数 点 是 有 效 字 符 〈 可 用 于 实 
现 浮上 点数 的 识别 ) 。 但 如 果 有 两 个 小 数 点 ， 那 么 第 二 个 小 数 点 将 被 看 作 是 无 效 的 ， 此 时 parseFloat() 
国 数 方法 会 把 这 个 小 数 点 之 前 的 字符 转换 为 数字 ， 如 字符 串 “123.456.789” 就 会 被 解析 成 浮 点 数 
123.456。 

同时 ， 使 用 parseFloat0 方 法 的 男 一 点 特殊 之 处 在 于 ， 字 符 串 必须 以 十 进 制 形 式 表 示 浮 点 数 。 
因为 该 方法 会 忽略 前 导数 值 0, 所 以 八进制 数 063 将 被 解析 为 十 进 制 数 63, 而 严格 模式 下 的 八进制 
数 0063 将 被 解析 为 NaN。 同 理 ， 对 于 十 六 进 制 数 0xff， 也 将 被 解析 返回 NaN， 因 为 在 浮 点 数 中 ， 
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字符 “o” 和 “x” 并 不 是 有 效 的 字符 (不 过 ， 在 实际 测试 过 程 中 会 发 现 ， 大 部 分 主流 浏览 器 会 解析 
返回 数值 0， 而 不 是 语法 规范 所 定义 的 NaN) 。 


4.2.5 ”转换 为 浮 点 数 


在 ECMAScript 语法 规范 中 ，parseFloat() 钞 数 方法 用 于 实现 将 String 类 型 原始 值 转换 为 浮 点 数 
形式 。 但 是 ， 根 据 String 原始 值 的 不 同 格 式 ， 也 不 一 定 必 须 解 析 为 浮 点 数 格式 ， 还 可 以 解析 为 整数 
格式 。 

下 面 看 一 个 使 用 parseFloatO 国 数 方法 转换 为 浮 点 数 的 代码 示例 〈 详 见 源 代码 ch04 目录 中 的 
ch04-es-parseFloat.html 文件 ) 。 


【代码 4-6】 

01 <script type="text/javascript"> 

02 EuUSse Sree 

03 var Vv i = parseFloat ("123"); 

04 console.log('parseFloat("123") = "+ Vv 1); 

0 varv fil= parseEloat( 23w0 > 

06 console。 1o0g( parseE loat( T2350) = 7): 

07 var vf 3 = harseploab (Tl? 123n): 

08 console.log ("parseFloat ("123.123") = "+v ff£ 3); 
09 Var VE f = parseFloat ("123.456.789"); 

10 console.log("parseFloat("123.456.189") = VIA f);» 
bal var vioct = parseFloat( 063): 

12 console.log ("parseFloat("063") = "+vV ff oct); 

3 var v f o oct = parseFloat ("0063"); 

14 econsole. Log( parseFloat (050063) = vf oocty)> 
有 Var V f hex = parseFloat ("Oxff"); 

16 console.log('parseFloat ("0xff") = " +v f hex); 

by, var Vv f str = parseFloat("123.abc™"); 

18 console. Log( parsesloat ("129.abeo") = Ty Tiogtr); 
19 var Vv gtrif = pargerloab(T abeel23n); 

20 console.log("'parseFloat ("abc.123") = " +v str f£); 


a De nly oh es 


关于 【代码 4-6】 的 分 析 如 下 : 

第 03 行 代码 定义 了 第 一 个 变量 v i， 并 初始 化 赋值 了 通过 parseFloat("123") 方 法 将 整数 字符 串 
"123" 转 换 为 浮 点 数 返回 。 

第 05 行 代码 定义 了 第 二 个 变量 vf 1， 并 初始 化 赋值 了 通过 parseFloat("123.0") 方 法 将 一 位 小 
数 《 数 学 0) 的 浮 点 数字 符 串 转换 为 浮 点 数 返回 。 

第 07 行 代码 定义 了 第 三 个 变量 vf 3， 并 初始 化 赋值 了 通过 parseFloat("123.123") 方 法 将 三 位 
小 数 的 浮 点 数字 从 串 转 换 为 浮 点 数 返回 。 

第 09 行 代码 定义 了 第 四 个 变量 vf f, 并 初始 化 赋值 了 通过 parseFloat("123.456.789") 方 法 将 含 
有 两 个 小 数 点 的 字符 串 转 换 为 浮 点 数 返回 。 

第 11 行 代码 定义 了 第 五 个 变量 vf oct， 并 初始 化 赋值 了 通过 parseFloat("063") 方 法 将 八进制 
格式 的 数字 字符 串 转换 为 浮 点 数 返 回 。 

第 13 行 代 码 定 义 了 第 六 个 变量 v f o_oct, 并 初始 化 赋值 了 通过 parseFloat("0063") 方 法 将 八 进 
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制 格 式 的 数字 字符 串 转 换 为 浮 点 数 返 回 。 注 意 ， 这 里 的 八进制 数字 字符 串 0063 为 严格 模式 下 的 八 
进 制 数 值 定 义 方式 。 

第 15 行 代码 定义 了 第 七 个 变量 v_f hex， 并 初始 化 赋值 了 通过 parseFloat("0xff)) 方 法 将 十 六 进 
制 格式 的 浮 点 数字 符 串 转换 为 浮 点 数 返 回 。 

第 17 行 代码 定义 了 第 八 个 变量 vf _str, 并 初始 化 赋值 了 通过 parseFloat("123.abc") 方 法 将 字符 
串 转 换 为 浮 点 数 返回 。 这 里 使 用 字符 串 “123.abc” 的 目的 是 想 测试 一 下 parseFloat0) 函 数 方法 如 何 
识别 非 数 字 字 符 串 。 

第 19 行 代 码 定 义 了 第 九 个 变量 v_str_ f, 并 初始 化 赋值 了 通过 parseFloat("abc.123") 方 法 将 字符 
串 转换 为 浮 点 数 返回 。 这 里 使 用 字符 串 “abc.123” 的 上 日 的 同样 是 想 测 试 一 下 parseFloat0 函 数 方法 
如 何 识别 非 数 字 字 符 串 。 

运行 页 面 ， 调 试 信息 如 图 4.6 所 示 。 


Developer Tools - ECMAScript in 15-days - http://localhost:6: 





a Inspect Consc Debugc Style Edi Performa Memo Netwc Storat 轩 " 园 日 窗口 可 


人 首 是 Filter output _] Persist Logs 
parseFLoat("123") = 123 ch94-es-parseFtoat .htmt:25:9 
parseFloat("123.06") = 123 ch04-es-parseFloat.html:27:3 
parseFloat("123.123") = 123.123 ch0Q4-es-parseFloat.html:29:3 
parseFLoat("123.456.789") = 123.456 ch64-es-parseFtoat .htmt:31:3 
parseFloat("063") = 63 che94-es-parseFtoat .htmtL:33;9 
parseFloat("0063") = 0 ch04-es-parseFloat.html:35:3 
parseFloat("QOxff") = 0 ch04-es-parseFloat.html:37:3 
parseFloat("123.abc") = 123 chO4-es-parseFloat .html:39:3 
parseFloat("abc.123") = NaN chQ4-es-parseFloat.html:41:3 

> 


4.6 ”parseFloat() 函 数 方法 


从 图 4.6 中 可 以 看 到 ， 第 04 行 代码 输出 的 结果 表明 ， 对 于 应 用 parseFloat(0) 国 数 方 法 的 整数 字 
符 串 ， 同 样 会 返回 整数 。 

第 06 行 代 码 输出 的 结果 表明 ， 对 于 应 用 parseFloat() 函 数 方 法 的 浮 点 数字 符 串 (但 小 数 部 分 为 
0) ， 会 舍 去 小 数 部 分 返回 整数 。 

第 08 行 代 码 输出 的 结果 表明 ， 对 于 应 用 parseFloat() 函 数 方 法 的 浮 点 数字 符 串 ， 同 样 会 返回 浮 
点 数 。 

第 10 行 代码 输出 的 结果 表明 , 如 果 字 符 串 定义 成 含有 多 个 小 数 点 (.) 字符 串 ("123.456.789" ) ， 
那么 parseFloatO 国 数 方法 仍 可 以 返回 一 个 有 效 浮 点 数 〈123.456) ， 只 不 过 会 舍弃 第 二 个 小 数 点 后 
面 的 数字 。 这 是 因为 parseFloat() 函 数 方法 会 将 第 二 个 小 数 点 (.) 后 面 的 字符 串 〈 包 含 第 二 个 小 数 
点 ) 全 部 视 为 无 效 字 符 。 

第 12 行 代 码 和 输出 的 结果 表明 ， 将 字符 串 定义 成 八进制 形式 的 字符 串 〈063) 是 没有 意义 的 ， 
因为 parseFloat0 上 数 方法 只 会 将 字符 串 按 照 十 进 制 数值 来 处 理 ， 所 以 得 到 的 结果 是 数值 63。 

第 14 行 代码 输出 的 结果 表明 ， 将 字符 串 定义 成 严格 模式 下 的 八进制 形式 的 字符 串 (0063) 也 
是 没有 意义 的 ， 因 为 parseFloat(0) 函 数 方 法 只 会 将 字符 “o” 按 照 无 效 字符 来 处 理 ， 所 以 得 到 的 结果 是 0。 

第 16 行 代码 输出 的 结果 表明 ， 将 字符 串 定义 成 十 六 进 制 形式 的 字符 串 (0xff) 也 是 没有 意义 
的 ， 因 为 parseFloat() 方 法 只 会 将 字符 “x” 按照 无 效 学 符 来 处 理 ， 所 以 得 到 的 结果 同样 是 0。 

第 18 行 代码 输出 的 结果 表明 ， 将 字符 串 定义 成 类 似 “123.abc” 了 字符 串 的 形式 ，parseFloat() 隔 
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06 console.log('Number ("123.456") = ' + Number ("123.456")); 

07 Console .log ("Number ("123.456.7189") = " + Number ("123.456.789")); 
08 console.log("Number (true) = " + Number (true) ) : 

09 console.log("Number (false) = " + Number (false));} 

10 console.log ("Number (null) = " + Number (nul]l)); 

a bal console.log ("Number (undefined) = " + Number (undefined)); 


es sj 


关于 【代码 4-7】 的 分 析 如 下 : 

第 02 行 代码 通过 Number(123) 方 法 将 整数 123 强制 类 型 转换 为 Number 类 型 。 

第 03 行 代 码 通过 Number("123") 方 法 将 字符 串 “123” 强 制 类 型 转换 为 Number 类 型 。 

第 04 行 代码 通过 Number("abc") 方 法 将 字符 串 “abc” 强 制 类 型 转换 为 Number 类 型 。 

第 05 行 代码 通过 Number(123.456) 方 法 将 浮 点 数 123.456 强制 类 型 转换 为 Number 类 型 。 

第 06 行 代码 通过 Number("123.456") 方 法 将 字符 串 “123.456” 强 制 类 型 转换 为 Number 类 型 。 

第 07 行 代码 通过 Number("123.456.789") 方 法 将 字符 串 “123.456.789” 强制 类 型 转换 为 Number 
类 型 。 

第 08 和 第 09 行 代 码 通过 Number(true) 和 Number(false) 方 法 将 Boolean 类 型 值 强 制 类 型 转换 为 
Number 类 型 。 

第 10 行 代码 通过 Number(null) 方 法 尝试 将 Null 类 型 值 强制 类 型 转换 为 Number 类 型 。 

第 11 行 代码 通过 Number(undefined) 方 法 尝试 将 Undefined 类 型 值 强制 类 型 转换 为 Number 类 型 。 

运行 页 面 ， 调 试 信息 如 图 4.7 所 示 。 





Developer Tools - ECMAScript in 15-days - http://localhost:633 


Ca Inspect Conso Debugg Style Edi Performa Memo Netwo Storac 轩 " 园 上 日 窗口 了 可 


疮 时 Filter output _| Persist Logs 
Number(123) = 123 ch04-es-number-cast.html :23:3 
Number("123") = 123 ch04-es-number-cast,html :24:3 
Number("abc") = NaN ch04-es-number-cast.html:25:3 
Number(123.456) = 123.456 ch04-es-number-cast,html :26:3 
Number("123.456") = 123.456 ch04-es-number-cast.html:27:3 

| Number("123.456.789") = NaN ch04-es-number-cast.html :28:3 
Number(true) = 1 ch04-es-number-cast.html:29:3 
Number(false) = 0 chO4-es-number-cast.html :30:3 
Number(null) = 0 ch04-es-number-cast.html :31:3 
Number(undefined) = NaN ch04-es-number-cast.html :32:3 

S| 


4.7 Number0 强 制 类 型 转换 


从 图 4.7 中 可 以 看 到 ， 第 02 和 第 03 行 代码 输出 的 结果 表明 ,对 数值 或 数值 类 型 的 字符 串 使 用 
Number() 方 法 均 会 强制 类 型 转换 为 数字 并 返回 。 

第 04 行 代码 输出 的 结果 表明 , 对 非 数值 类 型 的 字符 串 使 用 NumberO 国 数 方法 会 被 认为 是 无 效 
的 ， 并 返回 原始 值 NaN。 

第 05 行 和 第 06 行 代码 输出 的 结果 表明 ， 对 浮 点 数 或 浮 点 数 类 型 的 字符 串 使 用 Number() 函 数 
方法 均 会 强制 类 型 转换 为 数字 并 返回 。 

第 07 行 代码 输出 的 结果 表明 ， 对 类 似 “123.456.789” 的 字符 串 使 用 Number0 函 数 方法 会 被 认 
为 是 无 效 的 ， 并 返回 原始 值 NaN。 

第 08 和 第 09 行 代码 输出 的 结果 表明 ， 对 Boolean 类 型 值 (true 和 false) 使 用 Number() 函 数 
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方法 会 强制 类 型 转换 为 数字 并 返回 。true 返回 值 1，flase 返回 值 0， 这 点 与 其 他 高 级 编程 语言 是 一 
致 的 。 

第 10 行 代码 输出 的 结果 表明 , 对 Null 类 型 值 (null) 使 用 Number0 函 数 方法 会 被 认 是 有 效 的 ， 
并 返回 数值 0。 

第 11 行 代码 输出 的 结果 表明 ， 对 Undefined 类 型 值 (undefined) 使 用 Number0 函 数 方法 会 被 
认为 是 无 效 的 ， 并 返回 原始 值 NaN。 

以 上 就 是 使 用 Number() 函 数 方法 对 大 部 分 类 型 进行 强制 类 型 转换 的 结果 ,读者 在 使 用 Number() 
图 数 方法 时 需要 加 以 注意 。 


4.3.3 ”强制 转换 为 Boolean 类 型 


在 ECMAScript 语法 规范 中 ，Boolean(0) 尔 数 方 法 可 以 把 给 定 的 值 ( 布 尔 值 、 整 数值 、 字 符 串 、 
特殊 原始 值 等 ) 转换 为 布尔 类 型 的 值 。 

下 面 看 一 个 使 用 Boolean() 函 数 方 法 进行 强制 类 型 转换 的 代码 示例 ( 详 见 源 代码 ch04 目录 中 的 
ch04-es-boolean-cast.html 文件 ) 。 


【代码 4-8】 

01 <script type="text/javascript"> 

02 console.log("Boolean(true) = " + Boolean (true)); 
U3 console.log("Boolean(false) = " + Boolean(false)); 
04 console.log("Boolean(1) = " + Boolean (1)); 

性 console .log("Boolean (10) = " + Boolean(10) ) ; 

06 console.log("Boolean(0) = " + Boolean (0)); 

07 console.log('Boolean("abc") = ' + Boolean("abc"));} 
08 console.log('Boolean("") = ' + Boolean("")); 

09 console.log ("Boolean (null) = " + Boolean (null)); 
10 console.log("Boolean (undefined) = " + Boolean (undefinedqd));} 


TO 


关于 【代码 4-8】 的 分 析 如 下 : 

第 02 行 代码 通过 Boolean(true) 方 法 将 true 强制 类 型 转换 为 Boolean 类 型 。 

第 03 行 代码 通过 Boolean(false) 方 法 将 false 强制 类 型 转换 为 Boolean 类 型 。 

第 04 行 代码 通过 Boolean(1) 方 法 将 数值 1 强制 类 型 转换 为 Boolean 类 型 。 

第 05 行 代 码 通过 Boolean(10) 方 法 将 数值 10 强制 类 型 转换 为 Boolean 类 型 。 

第 06 行 代码 通过 Boolean(0) 方 法 将 数值 0 强制 类 型 转换 为 Boolean 类 型 。 

第 07 行 代码 通过 Boolean("abc") 方 法 将 字符 串 “abc ”强制 类 型 转换 为 Boolean 类 型 。 

第 08 行 代码 通过 Boolean("") 方 法 将 空 字 符 串 强 制 类 型 转换 为 Boolean 类 型 。 

第 09 行 代码 通过 Boolean(nul) 方 法 尝试 将 Null 类 型 值 强制 类 型 转换 为 Boolean 类 型 。 

第 10 行 代码 通过 Boolean(undefined) 方 法 尝试 将 Undefined 类 型 值 强制 类 型 转换 为 Boolean 类 型 。 

运行 页 面 ， 调 试 信息 如 图 4.8 所 示 。 

从 图 4.8 中 可 以 看 到 , 第 02 和 第 03 行 代码 输出 的 结果 表明 ,对 Boolean 类 型 值 使 用 Boolean() 
函数 方法 进行 强制 类 型 转换 ， 会 得 到 Boolean 原始 值 (true 或 false) 的 返回 值 。 
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Developer Tools - ECMAScript in 15-days - http://localhost:6334 





[a Inspect Conso Debugo Style Edil Performar Memo Netwo Storac 轩 " 轩 日 肉 口 了 可 


曾 时 Filteroutput _] Persist Logs 
| Boolean(true) = true ch@4-es-boolean-cast.html :23:3 
Boolean(false) = false ch@4-es-boolean-cast.html:24:3 
Boolean(1) = true chO4-es-boolean-cast.html :25:3 
Boolean(106) = true ch@4-es-boolean-cast.html :26:3 
Boolean(0) = false ch04-es-boolean-cast .html:27:3 
Boolean("abc") = true che4-es-bootean-Ccast .htmt:28:3 
Boolean("") = false ch@4-es-boolean-cast.html :29:3 
Boolean(null) = false ch@4-es-boolean-cast.html :30:3 
Boolean(undefined) = false ch04-es-boolean-cast.html :31:3 

i>| 


4.8 ”Boolean0 强 制 关 型 转换 


第 04 和 第 05 行 代 码 和 输出 的 结果 表明 , 对 非 去 数值 使 用 Boolean0 函 数 方 法 进行 强制 类 型 转换 ， 
会 得 到 Boolean 原始 值 (true) 的 返回 值 。 

第 06 行 代码 输出 的 结果 表明 ， 对 数值 0 使 用 Boolean() 函 数 方 法 进行 强制 类 型 转换 ， 会 得 到 
Boolean 原始 值 〈false) 的 返回 值 。 

第 07 行 代码 输出 的 结果 表明 ,对 非 空 的 字符 串 使 用 Boolean0) 困 数 方法 进行 强制 类 型 转换 ， 会 
得 到 Boolean 原始 值 〈true) 的 返回 值 。 

第 08 行 代 码 输出 的 结果 表明 , 对 非 衬 的 字符 串 使 用 Boolean() 函 数 方法 进行 强制 类 型 转换 ,会 
得 到 Boolean 原始 值 (false) 的 返回 值 。 

第 09 行 代 码 输出 的 结果 表明 ， 对 Null 类 型 值 (null) 使 用 Boolean() 函 数 方法 进行 强制 类 型 转 
换 ， 会 得 到 Boolean 原始 值 〈false) 的 返回 值 。 

第 10 行 代码 输出 的 结果 表明 ， 对 Undefined 类 型 值 (undefined) 使 用 Boolean0 函 数 方法 进行 
强制 类 型 转换 ， 会 得 到 Boolean 原始 值 (false) 的 返回 值 。 

以 上 就 是 使 用 Boolean0) 函 数 方 法 对 大 部 分 类 型 进行 强制 类 型 转换 的 结果 ， 读 者 在 使 用 
Boolean() 印 数 方法 时 需要 加 以 注意 。 


4.3.4 ”强制 转换 为 String 类 型 


在 ECMAScript 语法 规范 中 ，StringO 图 数 方法 可 以 把 给 定 的 值 〈 布 尔 值 、 整 数值 、 字 符 串 、 特 
殊 原 始 值 等 ) 转换 为 String 类 型 的 值 。 

下 面 看 一 个 使 用 String0 函 数 方法 进行 强制 类 型 转换 的 代码 示例 ( 详 见 源 代码 ch04 目录 中 的 
ch04-es-string-cast.html 文件 ) 。 


【代码 4-9】 

01 <script type="text/javascript"> 

02 var Vv num = 123; 

03 console Log(SString(l23) = Potrang(v nm)e 

04 var v t = true; 

US console. Log ("String(treue) = Pt otring(v ty)s 

06 var votrnull = String(nulils 

07 eongsoles log( Stringlnoalll= TE vt nw) 

08 var Vv str undefined = String (undefined); 

09 console.log("String (undefined) = " + Vv str undefined); 
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10 var Vv null = null; 

bl consoles Log( null EOStreng(l) = Dv nu EosGring())s 

1 var Vv undefined; 

bs console.log("undefined.toString() = " + V_ undefined.tostring()); 


i140 </SeCript> 


关于 【代码 4-9】 的 分 析 如 下 : 

第 02 行 代码 定义 了 第 一 个 变量 v_num， 并 初始 化 赋值 了 数字 123。 

第 03 行 代码 通过 String(123) 方 法 将 数字 123 强制 类 型 转换 为 String 类 型 值 。 

第 04 行 代码 定义 了 第 二 个 变量 v_t， 并 初始 化 赋值 了 布尔 值 true。 

第 05 行 代码 通过 String(true) 方 法 将 布尔 值 true 强制 类 型 转换 为 String 类 型 值 。 

第 06 行 代码 定义 了 第 三 个 变量 v_str_null， 并 初始 化 赋值 了 通过 Stringull) 方 法 将 原始 值 null 
强制 类 型 转换 为 String 类 型 值 。 

第 08 行 代 码 定 义 了 第 四 个 变量 v_str_undefined， 并 初始 化 赋值 了 通过 String(undefined) 方 法 将 
原始 值 undefined 强制 类 型 转换 为 String 类 型 值 。 

第 10 行 代 码 定义 了 第 五 个 变量 v_ null， 并 初始 化 赋值 了 原始 值 null。 

第 11 行 代码 尝试 通过 toString(0 方 法 将 变量 v_null 转换 为 字符 串 格 式 。 

第 12 行 代码 定义 了 第 六 个 变量 v_undefined， 并 未 进行 初始 化 操作 。 

第 13 行 代码 尝试 通过 toString() 方 法 将 变量 v_ undefined 转换 为 字符 串 格式 。 

运行 页 面 ， 调 试 信息 如 图 4.9 所 示 。 





Developer Tools - ECMAScript in 15-days - http://localhost:6334 
[a Inspect Conso Debugg Style Edil Performar Memo Netwo Storac 团团 目 窜 日 加 


闸 时 Filter output _| Persist Logs 
string(123) = 123 ch@4-es-string-cast.html:24:3 
string(true) = true ch@4-es-string-cast.html:26:9 
string(null) = null ch04-es-string-cast.html :28:3 
string(undefined) = undefined chO4-es-string-cast.html :30:3 

| APr TypeError: v null is null [Learn More] chO4-es-string-cast.html:32:9 
>| : 


ua 


图 4.9 StringO 强 制 类 型 转换 〈1) 


从 图 4.9 中 可 以 看 到 ， 对 整数 值 和 布尔 值 使 用 String() 函 数 方法 进行 强制 类 型 转换 时 ， 可 以 正 
确 生 成 字符 串 而 不 会 引发 钳 误 。 

同样 ， 对 原始 值 null 或 undefined 使 用 String0 函 数 方法 进行 强制 类 型 转换 时 ， 可 以 正确 生成 
字符 串 而 不 会 引发 错误 。 而 对 原始 值 null 使 用 toString(0) 函 数 方 法 进行 操作 时 ， 则 会 引发 类 型 错误 ， 
同样 ， 对 于 undefined 值 也 会 产生 同样 的 结果 ， 如 图 4.10 所 示 。 
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[a Inspecto Consol Debugge Style Editc Performan' Memor’ Networ Storag( 轩 " 轩 上 目 窗 口 了 可 


会 时 Filter output (| Persist Logs 
| string(123) = 123 ch04-es-string-cast.html :24:;3 
string(true) = true ch04-es-string-cast.html:26:9 
StringfnuLt) = null ch04-es-string-cast.html:28:3 
string(undefined) = undefined ch04-es-string-cast.html :30:3 


A TypeError: v undefined is Undefined [Learn More] ch04-es-string-cast.html:34:3 


nt 


ba 


4.10 String0 强 制 类 型 转换 (2) 
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其 实 ，String0 强 制 类 型 转换 方法 是 非常 简单 的 ， 该 方法 可 把 任何 值 转换 为 字符 串 。 不 过 ， 还 
是 建议 使 用 toString( 方 法 进行 转换 字符 串 的 操作 ， 除 非 必须 使 用 与 【代码 4-9】 中 第 02 行 同样 的 
代码 。 

众所周知 ，ECMAScript 是 弱 类 型 的 编程 语言 ， 在 很 多 情景 下 都 需要 对 变量 进行 强制 类 型 转换 
操作 ， 因 此 本 节 介绍 的 内 容 是 非常 实用 的 ， 希 望 能 对 读者 有 所 帮助 。 


4.4 ”本章 小 结 


本 章 主 要 介绍 了 ECMAScript 语法 规范 中 强制 类 型 转换 方面 的 知识 , 包括 Number()、Boolean() 
和 String(O 这 几 个 方法 的 使 用 ， 并 通过 一 些 具体 实 例 进 行 了 讲解 。 币 望 读者 通过 对 本 章 内 容 的 学 习 ， 
能 够 打 好 ECMAScript 脚本 语言 开发 的 基础 。 
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本 章 将 介绍 ECMAScript 解构 方面 的 相关 知识 ， 特 别 是 ECMAScript 6 语法 规范 中 关于 变量 解 
构 赋 值 的 内 容 。 


5.1 ECMAScript 变量 赋值 机 制 


ECMAScript 变量 赋值 机 制 针 对 原始 值 与 引用 值 是 不 一 样 的 ， 这 与 其 他 程序 设计 语言 有 所 区 
别 。 因 此 ， 本 节 将 详细 介绍 ECMAScript 变量 赋值 机 制 的 内 容 。 


5.1.1 变量 赋值 机 制 介 绍 


根据 ECMA-262 规范 中 的 描述 ， ECMAScript 解释 程序 在 处 理 变 量 赋 值 操 作 时 ， 必 须 判断 该 值 
是 原始 类 型 还 是 引用 类 型 。 ECMAScript 解释 程序 在 处 理 原始 类 型 和 引用 类 型 的 变量 赋值 机 制 上 采 
用 了 不 同 的 方式 。 

ECMAScript 的 原始 类 型 包括 Undefined、Null、Boolean、Number 和 String 五 大 类 型 。 因 此 ， 
ECMAScript 解释 程序 在 变量 赋值 时 ,会 先 判 断 该 值 是 否 为 五 大 类 型 的 原始 类 型 。 而 ECMA-262 规 
范 对 于 引用 类 型 的 定义 比较 抽象 ， 其 实 引用 类 型 就 是 一 个 对 象 ， 类 似 于 Java 语言 中 类 (class) 的 
概念 。 如 果 ECMAScript 解释 程序 判断 出 该 值 不 是 原始 类 型 ， 那 就 是 引用 类 型 。 

这 里 需要 特别 说 明 一 下 ， 在 许多 编程 语言 中 ， 字 符 串 都 是 被 当 作 引用 类 型 来 处 理 的 。 这 是 因 
为 字符 串 的 长 度 大 小 是 可 变 的 ， 不 适 于 作为 原始 类 型 来 处 理 。 不 过 ，ECMAScript 语法 改变 了 这 一 
点 ， 字 符 串 在 ECMAScript 中 是 作为 原始 类 型 来 处 理 的 。 这 样 ，ECMAScript 字符 串 的 处 理 速 度 会 
更 快 。 


ECMAScript 从 零 开 始 学 ( 视频 教学 版 ) 


5.1.2 ”变量 赋值 机 制 相 关 原 理 


由 于 原始 类 型 的 值 所 占据 的 空间 是 固定 的 ， 因 此 可 将 它 存 储 在 占用 较 小 内 存 区 域 的 “ 栈 ” 中 ， 
这 种 存储 机 制 便于 ECMAScript 解释 程序 迅速 查寻 变量 的 值 。 如 果 一 个 值 是 引用 类 型 ， 那么 其 存储 
空间 将 从 “ 堆 ” 中 分 配 。 

“ 栈 ” 与 “ 堆 ” 是 计算 机 操作 系统 中 两 个 十 分 重要 的 概念 。 从 数据 结构 上 理解 ，“ 栈 ”是 一 
种 “先进 后 出 、 后 进 先 出 ”的 存储 结构 ，“ 堆 ”是 一 种 树 形 存储 结构 。 从 计算 机 操作 系统 原理 上 理 
解 ，“ 栈 ”一 般 位 于 一 级 缓存 中 ,，“ 堆 ”一 般 位 于 二 级 缓存 中 , 一 级 绥 存 的 存 取 速度 快 于 二 级 缓存 。 

“ 栈 ” 与 “ 堆 ” 的 结构 关系 到 变量 的 存储 机 制 。 由 于 ECMAScript 引用 值 的 大 小 会 改变 ， 因 此 
不 能 将 其 存储 在 “ 栈 ” 中 ， 和 否则 会 降低 变量 查寻 访问 的 速度 。 而 指 回 引用 值 的 指针 (pointer) 是 存 
储 在 “ 栈 ” 中 的 ， 该 值 是 该 引用 值 对 象 存储 在 “ 堆 ” 中 的 地 址 ， 因 为 地 址 的 大 小 是 固定 的 ， 所 以 将 
其 存储 在 “ 栈 ” 中 没有 任何 问题 。 


5.1.3 ”关于 变量 的 解构 赋值 


在 ECMAScript 6 语法 规范 中 新 增 了 一 种 被 称 为 “解构 (Destructuring) 赋值 ”的 方式 。 上 具体 
来 说 ， 就 是 ECMAScript 6 语法 允许 按照 一 定 模式 ， 通 过 从 数组 或 对 象 中 提取 值 对 变量 进行 赋值 ， 
因此 这 种 方式 也 被 称 为 解构 (Destructuring) 。 解 构 或 解构 赋值 涉及 ECMAScript 的 各 种 变量 类 型 

〈 数 组、 字符 串 、 对 象 等 ) ， 且 不 同 变量 类 型 的 解构 方式 均 略 有 不 同 。 

下 面 先 看 一 个 ECMAScript 解构 赋值 的 简单 代码 示例 〈 详 见 源 代 码 ch05 目录 中 的 

ch05-es-destructuring.html 文件 ) 。 


【代码 5-1】 

01 <script type="text/javascript"> 

02 USBESEETCLET 

03 We 

04 * 数组 赋值 

05 | 

06 var arr moll 2 3 // TODO: define array 
(0 Var a = arr[0]; 

08 var BD = arr[1]: 

09 var se = aP [2 

10 consoles。 log( "print —ar Dre :my 

TT console ,Log(ar br es 

1 pe /* 

和 入 * 解构 赋值 

14 */ 

15 [ec b, a] = arr; // TODO: array destructuring 
16 console. Log("print after destructuring —arD 0 > 
1 eonsole loglar Bo)e 


1 oh el oh oe 


关于 【代码 5-1】 的 分 析 如 下 : 
第 06 行 代码 定义 了 一 个 简单 数组 ar， 同 时 进行 了 初始 化 赋值 操作 。 


88 


第 5 章 解构 


第 07 一 09 行 代码 中 依次 将 数组 arr 的 每 个 数组 项 按 顺 序 赋值 给 了 三 个 变量 a、b 和 c。 

第 15 行 代码 通过 数组 解构 赋值 的 方式 对 以 上 3 个 变量 (a、b 和 c) 重新 进行 了 赋值 操作 。 

运行 页 面 ， 调 试 信息 如 图 5.1 所 示 。 经 过 解构 赋值 操作 后 的 三 个 变量 a、b、c 值 的 顺序 发 生 了 
变化 。 





Developer Tools - ECMAScript in 15-days - http://localhost:63342/" 


[a Inspect¢ Consol Debuggte Style Edit Performan Memor Networ Storag 回 7* 园 日 宗 口 0 


兽 是 Filter output Persist Logs 
Mant -dr DecC : chO5-es-destructuring.html:31:3 
La chOS5-es-destructuyuring.html:32:3 
print after destructuring - a, b, c: chO5-es-destructuring,.html:37:;9 
| chO5-es-destructuring.html:38:9 

>| 


5.1 解构 赋值 的 基本 方式 


如 果 仅 仅 从 代码 上 看 ， 解 构 赋 值 方式 要 比重 新 对 三 个 变量 a、b、c 一 步 一 步 重 新 赋值 的 传统 方 
式 简 单 多 了 ， 这 一 点 正 是 解构 赋值 的 强大 之 处 。 


5.2 ”ECMAScript 数组 解构 赋值 


本 节 将 介绍 ECMAScript 语法 规范 中 关于 数组 的 解构 赋值 , 包括 数组 解构 赋值 的 基本 方式 和 特 
殊 用 法 。 


5.2.1 ”数组 解构 赋值 的 基本 方式 


ECMAScript 语法 规范 中 的 数组 解构 赋值 基本 是 按照 等 号 左边 与 等 号 右边 的 匹配 来 进行 的 。 其 
基本 语法 结构 如 下 : 

[Earl var2 .vard ee gvarNiie Aare // TODO: varN 表示 一 个 变量 ，arr 表示 一 个 数组 

下 面 看 一 个 数组 解构 赋值 基本 方式 的 代码 示例 〈 详 见 源 代 码 ch05 目录 中 的 ch05-es- 
destructuring-arr.html 文件 ) 。 


【代码 5-2 】 

01 <script type="text/javascript"> 

02 hb- 

0 

04 * 数组 解构 赋值 

05 ce 

06 ma Dele // TODO: array destructuring 
Or console.log ("Array destructuring - ar b, ¢ : "); 
08 consolee Log("a = Ma) 

09 console.log("bD= "+ b);} 

1 SoOrsoles lo ee cc To ey 


Tpt> 
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关于 【代码 5-2】 的 分 析 如 下 : 

第 06 行 代 码 通过 数组 解构 赋值 的 方式 ， 在 定义 了 一 组 变量 a、b、c 的 同时 进行 了 初始 化 赋值 
操作 。 

运行 页 面 ， 调 试 信息 如 图 5.2 所 示 。 在 通过 数组 解构 赋值 的 方式 对 一 组 变量 a、b、c 进行 初始 
化 操作 后 ， 变 量 a、b、c 依次 被 初始 化 赋值 为 数组 [1, 2, 3] 的 取 值 。 这 与 传统 变量 赋值 方式 相 比 ， 
数组 解构 赋值 方式 仅仅 通过 【代码 5-2】 中 第 06 行 这 一 行 代码 就 实现 了 对 三 个 变量 的 初始 化 赋值 
操作 。 





Developer Tools - ECMAScript in 15-days - http://localhost:63342/\ 


[a Inspect¢ Consol Debuggt Style Edit Performan Memor Networ Storag 轩 " 园 目 岂 日 可 


曾 时 Filteroutput _|Persist Logs 
Array destructuring - a, b,c: “es-destructuring-arr.html:28:9 

| a= 1 “es-destructuring-arr.html :29:9 
b=2 “es-destructuring-arr.html :30:9 

wm 归 “es-destructuring-arr.html:31:9 

>| 


am 


5.2 数组 解构 赋值 的 基本 方式 


5.2.2 ”数组 解构 赋值 的 能 套 方式 


ECMAScript 语法 规范 中 的 数组 解构 赋值 ， 除 了 前 面 介绍 的 基本 方式 外 ， 还 支持 任意 深度 的 藤 
套 方式 。 

下 面 看 一 个 数组 解构 赋值 租 套 方式 的 代码 示例 〈( 详 见 源 代码 ch05 目录 中 的 
ch05-es-destructuring-arr-nest.html 文件 ) 。 


【代码 5-3 】 

01 <script type="text/javascript"> 

02 ose serene 

03 1 

04 * 数组 解构 赋值 的 妊 套 方式 

05 ef 

06 Wai Sl = rt Ll /A TO arrar desteucturing 
I console.log("Array destructuring : ");} 

08 oonsoleoc log( [lar oll Cel = 2 3 
09 console.log("a= " + a); 

10 console.log("bD= "+ b); 

Tl console ogg 一 TE eo) 


120 /Cri 


关于 【代码 5-3】 的 分 析 如 下 : 

第 06 行 代 码 通过 数组 解构 赋值 的 方式 ， 在 定义 了 一 组 变量 a、b、c 的 同时 进行 了 初始 化 赋值 
操作 。 注 意 ， 这 里 的 变量 b 和 c 是 通过 绒 套 方式 解构 赋值 的 。 

运行 页 面 ， 调 试 信息 如 图 5.3 所 示 。 数 组 解构 赋值 的 柑 套 方式 支持 任意 深度 的 榜 套 ， 只 要 保证 
正确 的 匹配 方式 就 可 以 操作 。 
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Developer Tools - ECMAScript in 15-days - http://localhost:63342/Webst 


[a Inspecto Console Debugge Style Edito Performanc Memory Networ| Storage 轩 " 轩 上 日 窜 日 可 I 


首 是 Filteroutput (| PersistLogs 
Array destructuring : “destructuring-arr-nest.html:28:9 
[a, {[b}, cj = [1, ([(2]), 3])) “~destructuring-arr-nest.html:29:9 
a= 1 ~destructuring-arr-nest.html :30:9 
b=2 -destructuring-arr-nest .htmt:31:9 
Ce ~destructuring-arr-nest,html:32:9 

| 


Basemanmnannennannasnaannannannannannianiana nersniannennannanneanannnanAnnininnnnninnnnnnnnnnnnnnnnn 人 nm 


5.3 ”数组 解构 赋值 的 垦 套 方式 


含有 空位 的 数组 解构 赋值 


ECMAScript 语法 规范 中 的 数组 解构 赋值 ， 对 于 等 号 左边 含有 空位 的 变量 ， 也 可 以 进行 相应 的 


匹配 操作 。 


下 和 面 看 一 个 含有 空位 的 数组 解构 赋值 方式 的 代码 示例 〈( 详 见 源 代 码 ch05 目录 中 的 
ch05-es-destructuring-arr-space.html 文件 ) 。 
【代码 5-4】 


al 
02 
Ws 
04 
Vs 
06 
07 
08 
09 
10 
Tl 
之 
13 
14 
13 
16 
ba 
1 
19 
20 
wal 
2 
we 


<script type="text/javascript"> 


muses stelet ne 

大 

* 数组 解构 赋值 

区 

Letmal = Ml] // TODO: array destructuring 
console .1og ("Array destructuring - a : "); 
console.log("a = " + a); 

Y= | oy | // TODO: array destructuring 
console.log("Array destructuring - b : "); 
console.log("b= "+ b); 

Let [Lr dr T= [le 20 3]3 // TODO: array destructuring 
console.1log("Array destructuring - i, 3 : "); 

red 

We 

let [m7 nl = ll 227 3] // TODO: array destructuring 
console.log("Array destructuring ~- mn : ");} 

Console .1og ("m "ms 

Sonsoleslog( n= ne 

Letol er Cl = [L203] // TODO: array destructuring 
console .1og ("Array destructuring 一 七 : "); 
consoleelog(™E =" tt) 


console.log ("i 
console.1log("] 


</Script> 


关于 【代码 5-4】 的 分 析 如 下 : 

第 06 一 08 行 代码 定义 了 第 一 组 通过 数组 解构 方式 的 赋值 操作 。 需 要 注意 的 是 ， 仅 仅 定义 了 一 
个 变量 a， 等 号 右 侧 是 一 个 完整 的 数组 [1, 2, 3]。 

第 09 一 11 行 代码 定义 了 第 二 组 通过 数组 解构 方式 的 赋值 操作 。 需 要 注意 的 是 ， 在 定义 的 变量 
b 后 面 增加 了 一 个 逗号 分 隅 符 。 

第 12 一 15 行 代码 定义 了 第 三 组 通过 数组 解构 方式 的 赋值 操作 。 需 要 注意 的 是 ， 定 义 了 两 个 变 
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量 (i,j,) 。 

第 16 一 19 行 代 码 定义 了 第 四 组 通过 数组 解构 方式 的 赋值 操作 ， 这 里 同样 定义 了 两 个 变量 
(m, ,n) 。 需 要 注意 的 是 ， 变 量 n 前 面 增 加 了 一 个 逗号 分 隅 符 。 

第 20 一 22 行 代码 定义 了 第 五 组 通过 数组 解构 方式 的 赋值 操作 , 这 里 仅仅 定义 了 一 个 变量 (, ,t)。 
需要 注意 的 是 ， 变 量 t 前 面 有 两 个 逗号 分 隔 符 。 

运行 页 面 ， 调 试 信 息 如 图 5.4 所 示 。 


Developer Tools - ECMAScript in 15-days - http://localhost:63342/Webstor 
CR Inspector Console Debugger Style Edito Performance Memory Network Storage 轩 " 团 目 窟 日 可 





商 时 Filter output _| Persist Logs 


Array destructuyuring - a ; 
a=1 “destructuring-arr-space.html:29:9 


“destructuring-arr-space.html:28:9 


Array destructuring - 


b=1 


| Array destructuring - i, 


bt |! 


“destructuring-arr-space.html:31:9 
“destructuring-arr-space.html :32:9 
"destructuring-arr-space,.html:34:9 
"destructuring-arr-space.html:35:9 


j=2 "~destructuring-arr-space.html :36:9 
Array destructuring - m, "~destructuring-arr-space.html :38:9 
m= 1 -destructuring-arr-space.html :39:9 
n= 3 “destructuring-arr-space.html :40:9 


Array destructuring - 


名 


“destructuring-arr-space.html :42:9 
“destructuring-arr-space.html:43:9 


oommopenmer ee ome meneamerdems omen ene peee coer deme emcee cams ee rome ener cee rams come rom cameronee vee ree re remem re romernen Venere meneenn0t tm cane emcee comer meer dee enn vom ce 
! 


5.4 ”含有 空位 的 数组 解构 赋值 方式 


如 图 5.4 所 示 ， 尽 管 【 代 码 5-4】 中 变量 定义 的 格式 不 完全 ， 但 通过 数组 解构 赋值 的 方式 均 获 
取 了 各 目的 值 。 

变量 a 和 变量 b 均 获取 了 数组 的 第 一 项 值 1, 说 明 变 量 b 后 面 增加 的 喜 号 分 隔 符 是 正确 的 格式 。 

变量 i 和 变量 j 依次 获取 了 数组 的 第 一 项 和 第 二 项 值 1 和 2， 说 明 这 两 个 变量 (i,j,) 是 按 顺 序 
取 值 的 。 

变量 m 和 变量 n 分 别 获取 了 数组 的 第 一 项 和 第 三 项 值 1 和 3， 说 明 变 量 n 表面 增加 的 逗号 分 
隅 符 起 到 了 定义 空位 的 作用 。 

同样 ， 变 量 t 获取 了 数组 的 第 三 项 值 3， 说 明 变 量 t 前 面 增加 的 两 个 逗号 分 隅 符 起 到 了 定义 两 
个 空位 的 作用 。 

【代码 5-4】 演示 了 在 数组 解构 赋值 方式 中 ， 只 要 保证 正确 的 空位 匹配 方式 ， 变 量 就 可 以 获取 

正确 的 值 。 


5.2.4 使 用 省 略 号 的 数组 解构 赋值 


对 于 ECMAScript 语法 规范 中 的 数组 解构 赋值 ， 还 可 以 使 用 省 略 号 的 方式 进行 相应 的 匹配 操作 。 
下 面 看 一 个 使 用 省 略 号 数组 解构 赋值 方式 的 代码 示例 《〈 详 见 源 代码 ch05 目录 中 的 
ch05-es-destructuring-arr-dots.html 文件 ) 。 
【代码 5-5】 


01 <script type="text/javascript"> 


02 ge Strict™s 
03 /* 
04 * 数组 解构 赋值 
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05 六 

06 let [a, 
07 console. 
08 console. 
09 console. 
工作 let [Ys 
I console. 
12 console. 
13 console. 
14 console. 


9 /SCript> 


第 5 章 


“bb] = [1, 2, 3, 4, 5]; // TODO: array destructuring 

log ("Array destructuring — ar Bb "> 

lola = "ak 

人 

IEE ee [1 2 3 9 YX TAD arraw dastrueturing 
looqN"Arrayv Gesteucturing ar or CC ee ns 

oN = "Le 

eo es 

OO kK = EERE) 


关于 【代码 5-5】 的 分 析 如 下 : 
第 06 一 09 行 代码 定义 了 第 一 组 通过 数组 解构 方式 的 赋值 操作 ， 定 义 了 两 个 变量 a 和 bb。 这 里 


需要 注意 的 是 ， 变 量 bb 前 面 增加 了 省 略 号 修饰 竺 ， 等 号 右 侧 是 一 个 完整 的 数组 [1, 2, 3, 4, 5]。 


第 10 一 14 行 代码 定义 了 第 二 组 通过 数组 解构 方式 的 赋值 操作 ， 定 义 了 三 个 变量 i、j 和 kkk， 
同样 是 变量 kkk 前 面 增加 了 省 略 号 修饰 符 ， 等 号 右 侧 是 一 个 完整 的 数组 [1, 2, 3, 4, 5]。 
运行 页 面 ， 调 试 信息 如 图 5.5 所 示 。 


Developer Tools - ECMAScript in 15-days - http://localhost:63342/Webst 





[a Inspecto Console Debugge Style Edito Performanc Memor, Networl Storage 轩 " 园 目 窜 口 了 可 


会 时 Filter output | Persist Logs 
Array destructuring - a, ...bb : ~destructuring-arr-dots.html:28:9 
a= 1 ~destructuring-arr-dots.html :29:9 
xp.htmlb = 2,3,4,5 ~destructuring-arr-dots.html:30:9 
uy destructuring - i1, jj, ...Kkkk : ~destructuring-arr-dots.html:32:9 
i=1 ~destructuring-arr-dots.html:33:9 
j= 2 ~destructuring-arr-dots.html:34:9 
so ek = 3.455 ~destructuring-arr-dots.html:35:9 

|| 


5.5 使 用 省 略 号 的 数组 解构 赋值 方式 


如 图 5.5 所 示 ， 变 量 a 获取 了 数组 的 第 一 项 值 1， 使 用 了 和 省略 号 修饰 符 的 变量 bb 获取 了 数组 
的 其 余 值 (2, 3, 4, 5) 。 
变量 i 获取 了 数组 的 第 一 项 值 1， 变 量 j 获取 了 数组 的 第 二 项 值 2， 使 用 了 和 省略 号 修饰 符 的 变 
量 kkk 获取 了 数组 的 其 余 值 (3, 4, 5) 。 
通过 变量 bb 和 变量 kkk 的 取 值 可 以 清楚 地 看 到 ， 使 用 了 省 略 号 修饰 符 的 变量 获取 了 数组 的 剩 


余 项 的 值 。 


在 ECMAScript 语法 规范 中 , 使 用 省 略 号 修饰 符 的 数组 解构 赋值 是 有 格式 要 去 的 ,也 就 是 说 市 
有 省 略 号 修饰 符 的 变量 必须 放 在 最 后 ， 否 则 是 无 效 的 解构 方式 。 
下 面 看 一 个 无 效 使 用 省 略 号 数组 解构 赋值 方式 的 代码 示例 《〈 详 见 源 代 码 ch05 目录 中 的 
ch05-es-destructuring-arr-dots-err.html 文件 ) 。 


【代码 5-6】 


01 <script type="text/javascript"> 


02 Tae SEPTICET: 

03 WW 

04 * 数组 解构 赋值 

05 A 

06 Letadin nl A // TODO: array destructuring 
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OF console 
08 console 
09 console 
10 console 


I secreipt> 


.log ("Array 
LO mm = 


desteucturing 一 nm er nn: "> 
3 


sloq(nT Oo = Te) 


.log("n=" 


a 


关于 【代码 5-6】 的 分 析 如 下 : 
第 06 一 10 行 代码 定义 了 一 组 通过 数组 解构 方式 的 赋值 操作 ， 定 义 了 3 个 变量 : m、e 和 mn。 这 


运行 页 面 , 调试 信息 如 图 5.6 所 示 。 如 图 5.6 中 第 头 所 指 , 浏览 器 控制 台中 提示 了 错误 信息 (不 
是 一 个 结尾 变量 ) ， 表 明 使 用 了 和 省略 号 修饰 符 的 变量 e 无 法 正确 获取 数组 项 的 值 。 





Developer Tools - ECMAScript in 15-days - http://lo 
Debu StyleE Perforr Mem Netv Stor; 轩 " 团 目 罕 日 可 


[¢ Inspe Cons 


从 时 Filter output _] Persist Logs 


A SyntaxError: rest element may not “arr-dots-err.html:27:20 


have a trailing comma 
| ~ 


5.6 无效 使 用 省 略 号 的 数组 解构 赋值 方式 


5.2.5 ”未 定义 的 数组 解构 赋值 


对 于 ECMAScript 语法 规范 中 的 数组 解构 赋值 ， 如 果 变 量 未 获得 有 效 的 匹配 操作 , 变量 就 会 被 


赋予 未 定义 (undefined) 原始 值 。 


下 面 看 一 个 未 定义 的 数组 解构 赋值 方式 的 代码 示例 〈 详 见 源 代 码 ch05 目录 中 的 
ch05-es-destructuring-arr-undefined.html 文件 ) 。 


= []; // TODO: array destructuring 


// TODO: array destructuring 
desteuctrindg a De Th 
+t a)s 
Ir [eo 


【代码 5-7】 

01 <script type="text/javascript"> 
02 mae strict™ 

03 Wi 

04 * 数组 解构 赋值 

05 本 

06 Var [al] 

Or varS [or el = ul: 
08 console.log("Array 
09 console.log("a=" 
10 console ogg = 9 
可 console.log("c = " 


T2000 eript> 


1 pe 


关于 【代码 5-7】 的 分 析 如 下 : 

第 06 行 代码 通过 数组 解构 方式 定义 了 一 个 变量 a， 注意 在 等 号 右 侧 是 一 个 空 数组 []。 

第 07 行 代码 通过 数组 解构 方式 定义 了 两 个 变量 b 和 c, 注意 在 等 号 右 侧 虽然 不 是 一 个 空 数组 ， 
但 仅 含 有 一 个 数组 项 [1]。 

运行 页 面 ， 调 试 信息 如 图 5.7 所 示 。 变 量 a 最 终 被 定义 为 未 定义 (undefined) 原始 值 。 同 样 ， 
变量 c 最 终 也 被 定义 为 未 定义 (undefined) 原始 值 ， 仅 仅 是 变量 b 最 终 获 取 了 有 效 数 值 1。 
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Ca Inspe Cons Debu' Style E Perforr Mem Netv Stor: 轩 " 园 目 崔 日 可 


会 时 Filter output [| Persist Logs 
Array destructuring - a, b, cc: “arr-undefined.html:29:9 
a = Uyndefined ~arr-undefined.html:30:9 
b=1 “arr-undefined.html:31:9 
c= Undefined “~arr-undefined.html:32:9 

| 


5.7 未 定义 的 数组 解构 赋值 方式 


通过 以 上 的 输出 结果 表明 ， 在 数组 解构 赋值 方式 中 ， 当 等 号 左 侧 的 变量 数目 多 于 等 号 右 侧 的 
数组 项 时 ， 在 匹配 操作 完成 后 ， 多 余 的 变量 是 无 法 获取 有 效 数值 的 ， 这 些 变 量 将 会 被 赋予 未 定义 
(undefined) 原始 值 。 从 严格 意义 上 来 说 ， 变 量 被 赋予 未 定义 (Cundefined) 原始 值 并 不 算是 一 个 语 
法 错误 。 


5.2.6 ”无效 的 数组 解构 赋值 


对 于 ECMAScript 语法 规范 中 的 数组 解构 赋值 , 等 号 左 侧 的 变量 与 右 侧 的 数组 是 要 遵循 一 定 的 
语法 规则 的 ， 否 则 将 会 出 现 无 效 的 数组 解构 赋值 问题 。 
下 面 看 一 个 无 效 的 数组 解构 赋值 方式 的 代码 示例 〈( 详 见 源 代码 ch05 目录 中 的 


ch05-es-destructuring-arr-invalid-num.html 文件 ) 。 


【代码 5-8】 

01 <script 七 YPe="text/Jjavascript"> 

2 ESeesEeeES 

| pe 

04 * 无 效 的 数组 解构 赋值 

D3 本 

06 let [al = 1; 

吕 克 console,.log("Array destructuring 一 a 2 "); 
08 console.log("a = " + a); 


U9 "</script> 


关于 【代码 5-8】 的 分 析 如 下 : 

第 06 行 代码 通过 数组 解构 方式 定义 了 一 个 变量 a， 注 意 在 等 号 右 侧 是 一 个 数值 1， 而 不 是 一 
个 数组 。 

运行 页 面 ， 调 试 信息 如 图 5.8 所 示 。 浏 览 器 控制 台中 给 出 了 错误 提示 信息 (数值 1 并 不 是 一 个 
迭代 类 型 数据 ) ， 这 就 是 数组 解构 赋值 的 语法 要 求 。 


Developer Tools - ECMAScript in 15-days - http:/1 





Ca Inspe Cons Debu Style | Perfor Mem Nety Stor; 回 - 园 日 守 日 上 口 


闸 时 Filteroutput | Persist Logs 


"~invalid-num.html:27:13 





APr TypeError: is not iterabie 


TTT TT TY TT 


| 
图 5.8 无效 的 数组 解构 赋值 方式 〈1) 
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同样 ， 再 看 下 面 这 个 无 效 的 数组 解构 赋值 方式 的 代码 示例 《〈 详 见 源 代 码 ch05 目录 中 的 
ch05-es-destructuring-arr-invalid-boolean.html 文件 ) 。 
【代码 5-9】 


01 <script type="text/javascript"> 


02 USeSEPTCE 

03 oe 

04 * 无 效 的 数组 解构 赋值 

05 wd 

06 let [b] = true; 

UO console.log("Array destructuring - b : "); 
08 console.log("b = " + b); 


090m</seripe> 


关于 【代码 5-9】 的 分 析 如 下 : 

第 06 行 代码 通过 数组 解构 方式 定义 了 一 个 变量 b， 注 意 在 等 号 右 侧 是 一 个 布尔 值 tue， 而 不 
是 一 个 迭代 类 型 。 

运行 页 面 ， 调 试 信息 如 图 5.9 所 示 。 浏 览 器 控制 台中 给 出 了 同样 的 错误 提示 信息 (布尔 值 true 
不 是 一 个 迭代 类 型 数据 ) 。 


Developer Tools - ECMAScript in 15-days - http://localhost:6 





Ca Inspec! Consc Debugc Style Ed PerForma Memc Netwr Stora ~ 园 日 窗 日 可 


会 时 Filter output | Persist Logs 
AP TypeErroriCErue)is not iterable ~invalid-boolean.html:27:13 





TT A 


Masansansansansansansassansnpaassasansaasansansansansansansanssssansapsansassassasansansansansansansanssnsansansansansansansassasaanaacanssnsansansansansansansansansassassapsassassansapaassnsasansansansansansansansassansansapsansasaasansansansansansansansansansansansa)l 


5.9 无 效 的 数组 解构 赋值 方式 (2) 


现在 问题 就 很 清楚 了 ， 有 效 的 数组 解构 赋值 方式 必须 使 用 可 迭代 的 类 型 ， 否 则 就 会 出 现 语 法 
错误 。 因 此 ， 对 于 那些 特殊 的 原始 值 ， 是 无 法 实现 数组 解构 赋值 的 。 
下 面 继续 看 一 个 无 效 的 数组 解构 赋值 方式 的 代码 示例 〈 详 见 源 代 码 ch05 目录 中 的 
ch05-es-destructuring-arr-invalid-spec.html 文件 ) 。 
【代码 5-10】 


01 <script type="text/javascript"> 


0 之 gs steLetrs 

O03 Mi 

04 * 无 效 的 数组 解构 赋值 

05 

06 let [nan] = NaN; 

QT console.log("Array destructuring - nan : "); 
08 console.log("nan = " + nan); 

09 let [u] = undefined; 

10 console .1og ("Array destructuring -uu : "); 
有 consoleslog (UU= IJ 

12 let [nul] = null; 

3 console.1log ("Array destructuring -= nul : "); 
14 consoles log nu = Tt nul)s 


1 teh seul oh es 
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关于 【代码 5-10】 的 分 析 如 下 : 
这 段 代 码 对 几 个 特殊 的 原始 值 NaN、undefined 和 null 进行 了 数组 解构 赋值 的 测试 ， 效 果 与 前 
面 两 个 代码 示例 基本 相同 。 
运行 页 面 , 调试 信息 如 图 5.10 所 示 。 浏 览 器 控制 台中 给 出 了 同样 的 错误 提示 信息 (特殊 值 NaN 
不 是 一 个 友 代 类 型 数据 ) 。 


5.2.7 ”使 用 默认 值 的 数组 解构 赋值 


Developer Tools - ECMAScript in 15-days - http://locathost:6334 





[a Inspect Conso Debugo Style Edi Performa Memo Netwo Storac "于 目 内 日 可 


人 曾 定 Filter output 


APr TypeError: NaN is not iterable 


[| Persist Logs 


“arr-invalid-spec.html:27:13 


eeneeneense stoneeneenseseneense enenneeneeneeneenee nearness nee nnereensenseenee nee neenenneenseneeneenee senate neersneenssnsereesee reese neersneeneenseese nseesenseesennenesenee neers reentersensenseneenne nnn 


图 5.10 无 效 的 数组 解构 赋值 方式 (3) 


对 于 ECMAScript 语法 规范 中 的 数组 解构 赋值 ， 还 文 持 使 用 默认 值 的 方式 进行 相应 的 匹配 操 

作 。 对 于 使 用 默认 值 的 数组 解构 赋值 ， 等 号 右 侧 的 数组 格式 必须 使 用 严格 的 特殊 原始 值 undefined。 

下 面 看 一 个 使 用 默认 值 的 数组 解构 赋值 方式 的 代码 示例 ( 详 见 源 代 码 ch05 目录 中 的 

ch05-es-destructuring-arr-default.html 文件 ) 。 
【代码 5-11 】 


WE 
02 
03 
04 
QS 
06 
Om 
08 
Wg 
10 
1 
I 
3 
14 
Ts 
16 


<script type="text/jJavascript"> 
use Stricens 
/* 
* 使 用 默认 值 的 数组 解构 赋值 
a 
let [al = []; 
Console .log("Array destructuring 
Gonsoles Log( ae ah 
let [b] = [undefined]; 
console.log("Array destructuring 
Sonsole lo bp = pb) 
let [c = 1] = []; 
console.log("Array destructuring 
console, log(nc = TT Fe)s 
let [d = 1] = [undefined]; 
console.log("Array destructuring 
console logq( do qd): 
let [e = 1] = [2]; 
console.log("Array destructuring 
console.log("e = " + e); 
/Sript> 


关于 【代码 5-11】 的 分 析 如 下 : 
第 06 行 代码 通过 数组 解构 方式 定义 了 第 一 个 变量 a， 
第 09 行 代码 通过 数组 解构 方式 定义 了 第 二 个 变量 b， 


2 


a 


J 


J 


Ss 


等 号 右 侧 是 一 个 空 的 数组 []。 
等 号 右 侧 是 一 个 数组 [undefined]。 
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第 12 行 代码 通过 数组 解构 方式 定义 了 第 三 个 变量 c， 这 里 与 第 06 行 代码 的 方式 类 似 ， 唯 一 区 
别 是 等 号 左 侧 的 变量 c 赋予 了 默认 值 1。 

第 15 行 代码 通过 数组 解构 方式 定义 了 第 四 个 变量 d, 这 里 与 第 09 行 代码 的 方式 类 似 ， 唯 一 区 
别 是 等 号 左 侧 的 变量 d 赋予 了 默认 值 1。 

第 18 行 代码 通过 数组 解构 方式 定义 了 第 五 个 变量 e, 等 号 左 侧 的 变量 e 赋 予 了 默认 值 1, 等 号 
右 侧 是 一 个 数组 [2]。 

运行 页 面 ， 调 试 信息 如 图 5.11 所 示 。 





Developer A 
Ca Inspect Conso Debugg Style Edil Performar Memo Netwo Storac 回 * 园 日 交口 可 


会 是 Filter output _|Persist Logs 
Array destructuring - a : “tyring-arr-default.html:28:9 
a = Undefined "~tuyuring-arr-default.html:29:9 
Array destructuring - b : “turing-arr-default.html:31:9 
b = undefined "~turing-arr-default.html:32:9 
| Array destructuring - CcC: -turing-arr-default.htmt:34:9 
c=1 "~turing-arr-default.html:35:9 
Array destructuring - dd: “~turing-arr-default.html:37:9 
d=1 “tuyuring-arr-default.html:38:9 
Array destructuring - e : -turing-arr-default .htmi:40:9 
e = 2 .Euring-arr-default .htnmt:41:9 

> 


ennemesneensenennene nen nn nnn 


图 5.11 使 用 默认 值 的 数组 解构 赋值 方式 


如 图 5.11 所 示 ， 变 量 a 和 变量 b 均 获取 了 原始 值 undefined， 说 明 即 使 在 数组 解构 方式 下 定义 
一 个 空 的 数组 ， 变 量 仍 会 获取 怕 始 值 undefined。 

变量 c 获取 了 数值 1， 说 明 在 数组 解构 方式 下 定义 一 个 空 的 数组 ， 变 量 会 获取 定义 的 默认 值 [c 
= 1]。 

变量 d 在 等 号 左 侧 定义 了 默认 值 1， 最 终 也 是 获取 了 数值 1， 但 在 等 号 右 侧 的 数组 内 定义 了 原 
始 值 undefined， 这 一 点 很 关键 〈 请 与 下 面 变量 e 的 结果 进行 对 比 〉。 

变量 e 与 变量 d 类 似 ， 在 等 号 左 侧 定义 了 默认 值 1， 但 在 等 号 右 侧 的 数组 内 定义 了 数值 2， 最 
终结 果 也 是 获取 了 数值 2。 

通过 变量 d 和 变量 e 的 结果 对 比 ， 可 以 看 到 在 使 用 默认 值 的 数组 解构 赋值 方式 下 ， 当 等 号 右 
侧 的 数组 定义 为 原始 值 undefined 或 为 空 时 ， 变 量 才 会 获取 等 号 左 侧 定 义 的 默认 值 。 


5.2.8 默认 值 为 变量 的 数组 解构 赋值 


在 5.2.7 小 节 中 介绍 了 使 用 坝 认 值 的 数组 解构 赋值 方法 ， 其 实 该 炭 认 值 还 文 持 使 用 其 他 变量 的 
方式 进行 操作 ， 前 提 是 其 他 变量 必须 是 已 经 定义 过 的 。 
下 面 看 一 个 默认 值 为 变量 的 数组 解构 赋值 方式 的 代码 示例 〈 详 见 源 代码 ch05 目录 中 的 
ch05-es-destructuring-arr-default-var.html 文件 ) 。 
【代码 5-12】 
01 <script type="text/javascript"> 


02 nuSe strict"; 
03 /* 
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04 
05 
06 
UM 
08 
09 
10 
hal 
1 be 
be 
14 
ae 
16 
I 
18 
19 
20 
之 
忆 立 
2 
24 
之 村 
26 


* 默认 值 为 变量 的 数组 解构 赋值 


let [ab= al = [1]; 


console .1og ("Array 
console.log("a = " 
Console .log("b = " 
lat [c= 1 dd = 0] 
console.log ("Array 
console.log("c = " 
console.log("d = " 
let [e = 1, f = el] 
Console .1og ("Array 
Console .log("e = " 
console.log("f = " 
let [lg= lrh = g] 
Console .1og ("Array 
Console .log("g = " 
console.log("h = " 
let [i = 3, j= 1] 
console.log ("Array 


destructuring -ar b= a "ys 


十 
十 


destructuring 


一 
十 


a); 
b); 
[]? 


ad 


| 
oO 
1 
i 
T 
1 
0 


Cj 
qd); 
el | 


destructuring ~- e= 1, f = e: ");} 


十 
一 


destructuring 


十 
一 


destructuring = 1i 


e); 
ss 
WI 


Gh 


| 
上 
1 
二 
9 
1 
村 


g); 
h); 
Ws 


a Pe 


console.log("i =" + i); 
console .log("j = " + j); 


“Vacript> 


关于 【代码 5-12】 的 分 析 如 下 : 
第 06 行 代码 通过 数组 解构 方式 定义 了 第 一 组 变量 a 和 b， 变 量 b 使 用 了 的 认 值 赋 值 方式 ， 且 
赋予 的 是 变量 a 的 值 。 


第 10 行 代码 通过 数组 解构 方式 定义 了 第 二 组 变量 c 和 d， 


变量 d 使 用 了 的 认 值 赋值 方式 ， 且 赋予 的 是 变量 c 的 值 。 


第 14 行 代码 通过 数组 解构 方式 定义 了 第 三 组 变量 e 和 


等 号 右 侧 定义 的 数组 项 数值 2。 


第 18 行 代 码 通 过 数组 解构 方式 定义 了 第 四 组 变量 g 和 hh， 
变量 h 使 用 了 默认 值 赋值 方式 ， 且 赋予 的 是 变量 g 的 值 ， 等 号 右 侧 定 义 了 一 个 数组 [1, 2]。 


变量 e 使 用 了 默认 值 赋值 方式 c=1， 
其 与 第 10 行 代码 类 似 ， 唯 一 区 别 是 


变量 g 使 用 了 装 认 值 赋值 方式 g=1， 


第 22 行 代码 通过 数组 解构 方式 定义 了 第 五 组 变量 i 和 j， 变 量 i 使 用 了 默认 值 赋值 方式 i=j， 
变量 j 使 用 了 默认 值 赋值 方式 j=1。 
运行 页 面 ， 调 试 信息 如 图 5.12 所 示 。 





Developer Tools - ECMAScript in 15-days - http://localhost:63342/WebstormProjects/es-1: 
GR 人 DInspec 园 Consc DD Debugc {} StyleEd @ Performa 状 Memo 三 Netwc 吾 Stora 轩 " 团 目 罕 口 了 可 
站 是 Filter output 


Array destructuring - 
已 = 一】 
b = 1 

| Array decstructuring - 
c=1 
d=-1 
Array destructuring 
c=-2 
f=2 


Array decstructuring - 





a, 


| JPersist Logs 


b=a: “destructuring-arr-default-var.html :28:9 


~decstructuring-arr-decfoault-vor.html :29:9 


“~destructuring-arr-default-var.html :30:9 


c=-1,d=-= ci: “decstructuring-aorr-dcfoaulit-vor.html :32:9 


“destructuring-arr-default-var.html :33:9 


“decstructuring-arr-dcfault-vor.html :34:9 


-€=1,f= e: “~destructuring-arr-default-var.html :36:9 


“dcstructyuring-arr-dcfault-vor.html :37:9 


“destructuring-arr-default-var.html :38:9 


g-1,h- g: “dcstructuring-arr-decfault-vor.html :40:9 


~destructuring-arr-default-var.html :41:9 
~“~decstructuring-oaorr-dcfaulit-vor.html :42:9 


“~estryuctuyuring-arr-default-var.htnl:43:13 


5.12 默认 值 为 变量 的 数组 解构 赋值 方式 
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如 图 5.12 所 示 ， 变 量 a 和 变量 b 均 获 取 了 数值 1， 说 明 变 量 b 通过 堆 认 值 为 变量 的 方式 取得 
了 变量 a 的 值 。 

变量 c 和 变量 d 均 获取 了 数值 1， 说 明 变 量 c 先 通过 默认 值 的 方式 取得 了 数值 1， 然 后 变量 d 
通过 坝 认 值 为 变量 的 方式 取得 了 变量 c 的 值 。 

变量 e 和 变量 f 均 获取 了 数值 2， 说 明 变 量 f 通 过 默认 值 为 变量 的 方式 取得 了 变量 e 的 值 。 

变量 g 和 变量 h 分 别 获取 了 数值 1 和 2， 说 明 变 量 g 先 通 过 默 认 值 的 方式 取得 了 数值 1， 然 后 
变量 h 答 试 通过 默认 值 为 变量 的 方式 取得 变量 g 的 值 , 但 操作 未 成 功 , 因为 等 号 右 侧 的 数组 中 定义 
了 数字 项 〈 数 值 为 2) ， 所 以 变量 h 获取 了 该 数值 2。 

再 看 图 5.12 中 和 贡 头 所 指 ， 浏 览 问 控制 台 给 出 错误 信息 表示 变量 j 在 使 用 时 还 未 初始 化 ， 因 此 
在 使 用 坝 认 值 为 变量 的 数组 解构 赋值 方式 中 ， 该 变量 必须 已 经 进行 了 初始 化 操作 才 会 成 功 。 


5.2.9 ”默认 值 为 表达 式 的 数组 解构 峰值 


使 用 默认 值 的 数组 解构 赋值 方法 时 ， 该 睦 认 值 还 支持 使 用 表达 式 的 方式 进行 操作 ， 其 实 原 则 
上 与 献 认 值 为 变量 的 方式 类 似 。 

下 面 看 一 个 坝 认 值 为 表达 式 的 数组 解构 赋值 方式 的 代码 示例 《〈 详 见 源 代 人 码 ch05 目录 中 的 
ch05-es-destructuring-arr-default-exp.html 文件 ) 。 

【代码 5-13 】 


01 <script type="text/javascript"> 


加 区 "USe Strict"> 

03 We 

04 * 默认 值 为 表达 式 的 数组 解构 赋值 

05 EW 

06 function fnlarr destructuring() 1{ 

07 reaturn “fn arr destroucturing()"s 

08 } 

09 let [f = fn arr destructuring()] = ["f"]; 
1B 0 console.1log("Array destructuring = 一 上: "); 
1 consoles log( Ef = "Es 

2 let [fn = fn arr destructuring()] = []; 

13 console.1log("Array destructuring - fn : "); 
14 console .Log( fm = Fn) 


1 fleh sl o) eo 


关于 【代码 5-13】 的 分 析 如 下 : 

第 06 一 08 行 代 码 定义 了 一 个 图 数 方法 fn arr destructuring(0， 该 图 数 很 简单 ， 仅 仅 返 回 了 一 行 
字符 串 信 息 。 

第 09 行 代码 通过 默认 值 为 表达 式 的 数组 解构 方式 定义 了 第 一 个 变量 f， 其 表达 式 为 第 06 一 08 
行 代码 定义 的 函数 方法 fn_arr_destructuring()， 等 号 右 侧 的 数组 定义 了 一 个 字符 串 数组 项 f。 

第 12 行 代码 再 次 通过 默认 值 为 表达 式 的 数组 解构 方式 定义 了 第 二 个 变量 fn， 其 表达 式 仍 为 函 
数 方法 外 arr_destructuring(0)， 注 意 与 第 09 行 代码 不 同 的 是 ， 等 号 右 侧 的 数组 定义 了 一 个 空 数组 。 

运行 页 面 ， 调 试 信息 如 图 5.13 所 示 。 


100 


Developer Tools - ECMAScript in 15-days - http://tocalthoc 
[Ca Inspec Cons Debug Style Ec Perform Mem' Netw' Stora 加 -> 园 日 次 日 口 








人 曾 时 Filter output Persist Logs 
Array destructuring - f : “arr-default-exp.html:31:9 
f=f ~arr-default-exp.html:32:9 
Array destructuring - fn : “~arr-default-exp.html:34:9 

| fn = fn arr destructuring() “arr-default-exp.html :35:9 
> 


Besesensnenensnsnsnsesnsesnnnsenentnsnensnsnsnsnsenennentnrnnnsen nn nn 


图 5.13 ”默认 值 为 表达 式 的 数组 解构 赋值 方式 


如 图 5.13 所 示 ， 变 量 f 获 取 了 字符 串 “f”， 说 明 变 量 f 尝试 通过 默认 值 为 表达 式 的 数组 解构 
赋值 方式 未 成 功 。 

而 变量 fn 获取 了 函数 方法 和 arr destructuringO 返 回 的 字符 串 “fn arr destructuring()”， 说 明 
变量 fh 尝试 通过 默认 值 为 表达 式 的 数组 解构 赋值 方式 取得 了 成 功 。 

通过 变量 f 和 变量 fn 的 结果 对 比 ， 可 以 看 到 在 使 用 默认 值 为 表达 式 的 数组 解构 赋值 方式 中 ， 
变量 只 有 在 未 取得 等 号 右 侧 数组 中 的 具体 值 时 , 才能 够 取得 该 表达 式 的 值 (或 表达 式 才 会 被 操作 执行 ) 。 


5.3 ”ECMAScript 对 象 解构 赋值 


本 节 将 介绍 ECMAScript 语法 规范 中 关于 对 象 的 解构 赋值 ,包括 对 象 解构 赋值 的 基本 方式 和 特 
殊 用 法 。 


5.3.1 ”对象 解构 赋值 的 基本 方式 


ECMAScript 语法 规范 中 的 对 象 解构 赋值 同样 是 按照 等 号 左边 与 等 号 右边 的 匹配 来 进行 的 。 对 
象 解构 赋值 与 数组 解构 赋值 的 区 别 是 ,数组 是 按照 次 序 进行 匹配 的 , 而 对 象 是 按照 属性 名 匹配 的 (不 
一 定 按照 先后 次 序 〉。 

关于 对 象 解构 赋值 的 基本 语法 结构 如 下 : 

// Yopo: 对 象 解构 赋值 是 按照 等 号 左右 两 边 的 属性 名 进行 匹配 的 

{属性 名 1 :变量 1， 属性 名 2 :变量 2，. . .， 属 性 名 n: 变 量 n} = 

{属性 名 1 : 属性 值 1， 属 性 名 2 :属性 值 2，. . .， 属 性 名 n: 属 性 值 n} 

下 面 看 一 个 对 象 解构 赋值 基本 方式 的 代码 示例 〈 详 见 源 代 人 码 ch05 目录 中 的 ch05-es- 
destructuring-obj.html 文件 ) 。 

【代码 5-14】 


01 <script type="text/javascript"> 


02 ET SEETeTET， 

03 WE 

04 * 对 象 解构 赋值 

05 ee 

06 var {oA, oB} = {oA : "AAA", 0oB : "BBB"}; // TODO: object destructuring 
OF console.log ("object destructuring - oA, oOoB : "); 
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08 Sonsoles log GATE OA) 
09 Consocole log (noB = ™ + oB): 
1h 0 he sh ee 


关于 【代码 5-14】 的 分 析 如 下 : 

第 06 行 代码 为 对 象 解构 赋值 的 方式 ， 在 等 号 左 侧 以 对 象形 式 定 义 了 两 个 变量 oA 和 oB， 在 等 
号 右 侧 定 义 了 一 个 对 象 ， 同 时 对 变量 oA 和 oB 进行 了 初始 化 赋值 操作 。 

运行 页 面 ， 调 试 信息 如 图 5.14 所 示 。 





Developer Tools - ECMAScript in 15-days - http://localhost:63 


Ca Inspect Consc Debugc Style Edi Performa Memo Netwoc Storat 轩 ~" 轩 上 日 窜 日 可 


闸 时 Filter output | J Persist Logs 
object destructuring - oA, oB : ~“~destructuring-obj.html:28:9 
oA = AAA “destructuyuring-obj.html:29:9 
oB = BBB “destructuring-obj.html:30:9 

> 


5.14 对象 解构 赋值 的 基本 方式 


如 图 5.14 所 示 , 在 通过 对 象 解构 赋值 的 方式 对 两 个 变量 oA 和 oB 进行 初始 化 操作 后 , 变量 oA 
和 oB 依次 获取 了 等 号 右 侧 对 象 中 的 值 "AAA" 和 "BBB"。 

这 与 传统 变量 赋值 方式 相 比 ， 对 象 解构 赋值 方式 仅仅 通过 【代码 5-14】 中 第 06 行 这 一 行 代码 
就 实现 了 对 一 组 变量 的 初始 化 赋值 操作 。 

通过 前 面 对 数 组 解构 赋值 方式 的 学 习 ， 读 者 一 定 会 想 ， 如 果 将 【代码 5-14】 中 的 对 象 解构 赋 
值 改 成 通过 数组 解构 方式 赋值 来 实现 , 效果 不 是 一 样 的 吗 , 两 者 有 什么 区 别 呢 ? 其 实 这 两 种 解构 方 
式 还 是 有 明显 区 别 的 ， 请 继续 阅读 下 面 的 内 容 。 


5.3.2 不 按 次 序 的 对 象 解构 赋值 


ECMAScript 语法 规范 中 描述 的 对 象 解构 赋值 方式 ， 特 别提 到 了 是 按照 属性 名 来 进行 匹配 的 ， 
也 就 是 不 一 定 要 按照 先后 次 序 进行 匹配 。 
下 面 看 一 个 不 按 次 序 进 行 对 象 解构 赋值 方式 的 代码 示例 〈 详 见 源 代码 ch05 目录 中 的 
ch05-es-destructuring-obj-disorder.html 文件 ) 。 
【代码 5-15】 


01 <script type="text/javascript"> 


02 Vga SEPLoGY: 

人 局 We 

04 * 不 按 次 序 的 对 象 解构 赋值 

加 与 od 

06 var {oA, oB} = {0B : "AAA", oA : "BBB"}; // TODO: object destructuring 
07 console.log ("object destructuring - oA, oOoB : "); 

08 console.log("oA = " + oA); 

09 eonsole log( op = "oRB)s 

0 Var stoDa GG = [LOGE CCE ole Ds // TODO: object destructuring 
ab console.log ("object destructuring - oC, oD : "):; 

工人 console .log("oCc = "+ oC); 

hs onsoles log(uon = os 
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关于 【代码 5-15】 的 分 析 如 下 : 

第 06 行 代码 为 对 象 解构 赋值 的 方式 ,在 等 号 左 侧 通 过 对 象 方式 定义 了 两 个 变量 oA 和 oB, 在 
等 号 右 侧 定义 了 一 个 对 象 (注意 对 象 中 的 属性 名 oA 和 oB 的 顺序 与 变量 oA 和 oB 的 顺序 是 不 一 致 
的 ) ， 同 时 对 变量 oA 和 oB 进行 了 初始 化 赋值 操作 。 

第 10 行 代码 与 第 06 行 代码 类 似 , 在 等 号 左 侧 通过 对 象 方式 定义 的 两 个 变量 oD 和 oC 的 顺序 ， 
与 等 号 右 侧 定 义 的 对 象 中 属性 名 的 顺序 是 不 一 致 的 。 

运行 页 面 ， 调 试 信息 如 图 5.15 所 示 。 在 通过 对 象 解构 赋值 的 方式 对 两 个 变量 oA 和 oB 进行 初 
始 化 操作 后 ， 变 量 oA 和 oB 依次 获取 了 等 号 右 侧 对 象 中 的 值 "BBB" 和 "AAA"， 这 就 说 明 在 对 象 解 
构 赋值 方式 中 是 按照 变量 名 和 属性 名 来 匹配 的 ， 与 变量 和 属性 定义 的 次 序 没 有 关系 。 同 理 ， 另 外 两 
个 变量 oC 和 oD 获取 了 属性 值 "CCC" 和 "DDD" 也 就 很 好 理解 了 。 
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[a Inspect Consol Debugg Style Edit Performat Memo Netwol Storac 轩 " 团 目 窗 日 了 0 


闸 时 Filter output |_| Persist Logs 
object destructuring - oA, oB : “turing-obj-disorder.html:28:9 
oA = BBB "~tuyuring-obj-disorder.html:29:9 
oB = AAA “turing-obj-disorder.html:30:9 

| object destructuring - oC, oD : "tuyuring-obj-disorder.html:32:9 
oC = CCC turing-obj-disorder.html :33:9 
oD = DDD "~turing-obj-disorder.html:34:9 


TT 


图 5.15 不 按 次 序 的 对 象 解构 赋值 方式 


5.3.3 ”对象 解构 赋值 方式 的 扩展 


在 前 面 介绍 了 关于 对 象 解构 赋值 方式 的 语法 形式 ， 与 【代码 5-14】 和 【代码 5-15】 中 的 对 象 
解构 赋值 方式 似乎 有 所 出 入 。 其 实 ，【 代码 5-14】 和 【代码 5-15】 是 对 象 解构 赋值 的 简写 方式 ， 
下 面 要 介绍 的 语法 形式 是 对 象 解构 赋值 方式 的 扩展 ， 也 可 以 理解 为 完整 方式 。 

下 面 看 一 个 对 象 解构 赋值 方式 扩展 的 代码 示例 〈( 详 见 源 代码 ch05 目录 中 的 ch05-es- 
destructuring-obj-extend.html 文件 ) 。 

【代码 5-16】 


01 <script type="text/javascript"> 


02 se SEFletn 

0 民 ] A 

04 * 对 象 解构 赋值 方式 的 扩展 

0 ed 

06 var {oA : oA, oB : oOB}) = {oA : "AAA", OB : "BBB"};// TODO: object destructuring 
07 console.log ("object destructuring - oA, oOoB : "); 

08 console.log("oA = " + oA); 

09 console.log("oB = " + oB); 

10 Var IoC TO oD oda {|oC > "TOO" oD "MDD /A TODNOG opject destructuring 
Tl console log ("obect destreucturing OC od. ")s 

2 console log oc = Oo) 

3 console.log("od = " + od);} 

14 console. log("obiject destructuring — oC oOoD "> 
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1 congole logq("oC = "mT oC) 
16 console.log("oD = " + oD); 
Script> 


关于 【代码 5-16】 的 分 析 如 下 : 

第 06 行 代码 为 对 象 解构 赋值 的 扩展 方式 ,在 等 号 左 侧 定义 的 对 象 包含 了 两 个 属性 (oA : oA, oB : 
oB) ， 且 属性 名 与 属性 值 是 相同 的 ;在 等 号 右 侧 定 义 了 一 个 对 象 (oA : "AAA",oB :"BBB") 。 

第 10 行 代码 与 第 06 行 代码 类 似 , 不 同 之 处 在 于 等 号 左 侧 定义 的 对 象 所 包含 的 两 个 属性 (oC : 
oc, oD : 0d) ， 属 性 名 与 属性 值 是 不 相同 的 。 

运行 页 面 ， 调 试 信息 如 图 5.16 所 示 。 
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[Ca Inspector Console Debugger Style Editor Performance Memory Network Storage 轩 " 园 目 内 日 可 
_] Persist Logs 


闸 时 Filter output 
object destructuring - oA, oB : 
oA = AAA 


“~destructuring-obj-extend.html :28:9 
~destructuring-obj-extend.html:29:9 
~destructuring-obj-extend,.html:390:;9 


oB = BBB 
object destructuring - oc, 0d : “destructuring-obj-extend,.html:32:9 
oc = CCC ~“~destructuring-obj-extend.html:33:9 


~destructuring-obj-extend.html:34:9 


| 04= ppp 
~destructuring-obj-extend.html:35:9 


object destructuring - oC, oD : 
A ReferenceError: oC is not defined [Learn Morel ~destructuring-obj-extend,.html :36:9 





5.16 对象 解构 赋值 的 扩展 方式 


如 图 5.16 所 示 ， 在 通过 对 象 解构 赋值 的 扩展 方式 对 两 个 变量 oA 和 oB 进行 初始 化 操作 后 ， 变 
量 oA 和 oB 依次 获取 了 等 号 右 侧 对 象 中 的 值 "AAA" 和 "BBB"， 这 个 似乎 看 不 出 有 什么 特别 之 处 。 

但 是 , 在 通过 对 象 解构 赋值 的 扩展 方式 将 对 象 oC : oc, oD : od 进行 初始 化 操作 后 , 结果 是 属性 
值 oc 和 od 获取 了 等 号 右 侧 对 象 中 的 值 "CCC" 和 "DDD"。 如 图 5.16 中 箭头 所 指 , 浏览 器 控制 台中 的 
调试 信息 提示 属性 名 oC 是 “未 定义 ”的 ， 由 此 推断 属性 名 oD 也 是 “未 定义 ”的 。 

通过 属性 名 oC 和 oD 的 结果 可 以 看 到 ， 在 对 象 解构 赋值 方式 中 属性 名 是 用 来 与 对 象 匹 配 的 ， 
而 属性 值 具 体 指 代 变 量 名 。 


5.4 ECMAScript 字符 串 解构 赋值 


本 节 将 介绍 ECMAScript 语法 规范 中 关于 字符 串 的 解构 赋值 ,在 对 字符 串 进行 解构 赋值 时 , 通 
第 是 先 将 字符 串 转 换 为 对 象 后 再 处 理 。 
下 面 看 一 个 字符 串 解 构 赋 值 的 代码 示例 ( 详 见 源 代 码 ch05 目录 中 的 ch05-es-destructuring-string. 
html 文件 ) 。 
【代码 5-17】 


01 <script type="text/javascript"> 


02 Tuse Sterict™. 

03 /入 

04 * 字符 串 的 解构 赋值 
05 二 
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06 let [lar brcel = "abcr; // TODO String destructuring 
07 console.。 Log("print atfter destructuring ~ arDe:"),s 
08 console.log("a = " + al):; 
09 eonasole lon( Db "re 
li0 eonsolesloog( ec = 


TL 


关于 【代码 5-17】 的 分 析 如 下 : 


第 06 行 代码 就 是 字符 串 解构 赋值 方式 的 实现 , 在 等 号 左 侧 以 数组 的 形式 定义 了 一 组 变量 a、b 
和 c， 在 等 号 右 侧 定 义 了 一 个 字符 串 ， 此 时 会 先 将 该 字符 串 转 换 为 一 个 字符 数组 的 形式 。 
运行 页 面 ， 调 试 信息 如 图 5.17 所 示 。 变 量 a、b 和 c 在 通过 解构 赋值 操作 后 ， 分 别 获 取 了 值 "a" 


a bd 。 
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[a Inspectc Consol Debugg: Style Edit Performan Memor Netwol Storag 回 7* 园 日 池 口 了 加 


曾 时 Filter output 


| print after destructuring - a, b,c: 


DE NE NE NE NE EE DE EE EEE DE EN EE OE EN EEE EE NE DE EE EN OE EE EE EE NN EE EEE EE EEE NE EE EE EE EN EN EE EE NE EE NE et a 


[| Persist Logs 


“destructuring-string.html:28:9 
“destructuring-string.html:29:9 
~destructuring-string.html:30:9 
“~destructuring-string.html:31:9 


5.17 字符 串 的 解构 赋值 方式 


5.5 ”ECMAScript 数值 解构 赋值 


本 节 将 介绍 ECMAScript 语法 规范 中 关于 数值 的 解构 赋值 ,在 进行 对 象 解构 赋值 操作 时 ， 如 果 


等 写 右 侧 是 数值 ， 就 会 先 将 该 数值 转换 为 对 象 后 再 处 理 。 


下 耐看 一 个 字符 串 解构 赋值 的 代码 示例 ( 详 见 源 代码 ch05 目录 中 的 ch05-es-destructuring-num. 


html 文件 ) 。 


【代码 5-18】 

01 <script type="text/javascript"> 

02 Snse steletn 

03 WE 

04 * 数值 的 解构 赋值 

05 四 

06 let {toString : s} = 123; // TODO: String destructuring 
Cy console. 10g ("print after destructuring — 9 » Tm)» 

08 if(s === Number.prototype.toString) 

09 eonsoles log(Ta =" 3) 


3 ee eal oh E> 


关于 【代码 5-18】 的 分 析 如 下 : 


第 06 行 代 码 就 是 数值 解构 赋值 方式 的 实现 ， 在 等 号 左 侧 以 对 象 的 方式 定义 了 一 个 变量 s， 在 


等 号 右 侧 定 义 了 一 个 数值 123。 


第 08 和 第 09 行 代 码 判断 变量 s 是 否 全 等 于 Number 原型 对 象 toString， 根 据 判 断 结果 输出 变 


105 


ECMAScript 从 零 开 始 学 ( 视频 教学 版 ) 


量 s 的 内 容 。 
运行 页 面 ， 调 试 信息 如 图 5.18 所 示 。 变 量 s 全 等 于 原型 对 象 Number.prototype.toString， 这 就 
说 明 数 值 123 先 转换 为 了 Number 对 象 ， 而 变量 s 获取 了 Number 对 和 象 原 型 的 toString 属性 。 
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中 Inspect Conso Debugg Style Edi Performar Memo Netwo Storac 回 - 园 日 字 日 口 


曾 时 Filter output |_J Persist Logs 
| print after destructuring - S : ~-destructuring-num.html:28:9 
s = function toString() { ~destructuring-num.html :30:13 


[native code] 


eenenensnsenennsenennnennnennnnnn mn i i ni i nn in 


图 5.18 数值 的 解构 赋值 方式 


5.6 ECMAScript 解构 赋值 的 应 用 


本 节 将 介绍 ECMAScript 解构 赋值 的 应 用 ,包括 交换 变量 的 值 、 函 数 多 个 返回 值 、 定 义 函 数 参 


5.6.1 交换 变量 的 值 


通过 ECMAScript 数组 解构 赋值 的 方式 ,可 以 很 方便 地 实现 对 变量 交换 值 的 操作 ， 相 比 于 传统 
的 交换 方法 有 效 地 提高 了 效率 。 
下 面 是 一 个 关于 通过 数组 解构 赋值 的 方式 实现 变量 交换 值 的 代码 示例 〈 详 见 源 代 码 ch05 目录 
中 的 ch05-es-destructuring-var-exchange.html 文件 ) 。 
【代码 5-19】 


01 <script type="text/javascript"> 


02 yl se sh 

Ei} 

04 * 传统 方式 交换 变量 的 值 

05 so 

06 console.10g("-——-———--—-—-—-—— 传统 方式 交换 变量 的 值 ------------ i 
六 Var a= 1; 

08 Var b = 2; 

09 console Logq(l"a = Pa) 

10 ConSscle log ("b= "Db): 

1 bal console.log("Exchange a & b 's data by ordinary method :");} 
1 Var temp = ay; 

3 a = 了 by; 

14 b = temp; 

L539 eonsoles log("a = MT a)s 

16 console. ,logq("D= "| Ds 

了 /* 

18 * 通过 数组 解构 方式 实现 交换 变量 的 值 

19 
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20 
下 
22 
本 
24 
2 
26 
a 
28 
29 


Console .1og (" 
Way 一 
console.1log("Array destructuring 一 XYyY : 
机 


[2 


console.log ("x = 
console.log("y = 


[xr Yl = [Yr Xx]: 
console.log("x = 
console.log("y = 


“Nacript> 


ws 
console.log("Exchange x & y 's data with array destructuring 


数组 解构 方式 实现 交换 变量 的 值 ---------- 2 
// TODO: array destructuring 


a 


// TODO: Exchange data 


i 
we 


关于 【代码 5-19】 的 分 析 如 下 : 
第 06 一 16 行 代码 通过 传统 方式 (借助 临时 中 间 变 量 ) 实 现 了 交换 变量 的 值 , 关键 部 分 是 第 12 一 
14 行 定义 的 代码 。 
第 20 一 28 行 代码 通过 数组 解构 赋值 实现 了 交换 变量 的 值 ， 关 键 部 分 是 第 26 行 定义 的 代码 ， 


这 里 通过 数组 解构 赋值 方式 交换 了 变量 x 和 变量 y 的 值 。 


2 


解构 


运行 页 面 , 调试 信息 如 图 5.19 所 示 。 通过 数组 解构 赋值 方式 交换 了 变量 x=1 和 变量 y=2 的 值 ， 
交换 后 的 结果 为 x=2、y=1。 相 比 第 12 一 14 行 代码 定义 的 传统 方式 ， 数 组 解构 赋值 方式 仅仅 通过 第 
26 行 定义 的 这 一 行 代码 就 实现 了 变量 值 的 交换 。 


Wa 
02 
03 
04 
05 
06 
QW 
08 
09 
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[a Inspector Console Debugger Style Editor Performance Memory Network Storage 


Array destructuring - x, y : 


Exchange x & y 's data with array destructuring : 


曾 时 Filter 
a= 1 
b=2 
a= 2 

| +b=1 
X = 1 
y 一 2 
X 二 2 
y=1 


数组 解构 方式 实现 交换 变量 的 值 ---------- 


-destructuring-var-exchange .htmt : 


-destructuring-var-exchange.html: 
-destructuring-var-exchange.html: 
-destructuring-var-exchange.html: 
-destructuring-var-exchange.html: 
-destructuring-var-exchange.html: 


-destructuring-var-exchange.html: 


-destructuring-var-exchange.html: 
-destructuring-var-exchange.html: 
-destructuring-var-exchange.html: 
-destructuring-var-exchange.html: 
-destructuring-var-exchange.html: 


-destructuring-var-exchange.html: 


是 " 园 上 日 容 口 口 


_] PersistLogs 


27:9 


30:9 
31:9 
32:9 
36:9 
37:9 
41:9 


43:9 


TT TOTO TT TT TT TIT TTPO TT TOT TT PTOI TT TT TT TT TOT TT TOOT TTT TTT TTT TT TOOT TT TT TT TT TTT TT TOTO TT TT TT TT TT TT TTT TOTTI TT TT TOT TT TT TT TT TIT TOTTI TT TTT TT TT TT TT TPT TT TOT TT TT TT TT TT TT TT 


5.19 通过 数组 解构 方式 交换 变量 的 值 (1) 


【代码 5-19】 仅 仅 是 针对 两 个 变量 实现 交换 值 的 情况 ， 可 能 效果 还 不 太 明 显 。 如 果 是 针对 多 

个 变量 (3 个 或 3 个 以 上 ) ， 那 么 数组 解构 赋值 方式 的 优势 就 会 愈 发 明显 。 
下 面 就 是 一 个 关于 通过 数组 解构 赋值 的 方式 实现 3 个 变量 交换 值 的 代码 示例 ( 详 见 源 代码 ch05 

目录 中 的 ch05-es-destructuring-var-tri-exchange.html 文件 ) 。 
【代码 5-20】 


<script type="text/jJavascript"> 
POS Sel 


A* 


* 传统 方式 交换 变量 的 值 


A 


Console ,lodgd” 


Var a= 1; 
Var b = 2; 
Var c= 3; 
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10 Console .log("a = " + a); 

al console.log("b = "+b): 

I console 1og("e = WT Ch 

3 console.log("Exchange a & bp gc 's data by ordinary method :");} 
14 Var temp = a; 

15 a=b; 

16 b= Cc;? 

Bf} C = temp; 

18 console.log("a = " + a); 

19 console loq("D = "TF bb) 

20 Sonsolenlog( ee = TE ey 

2 /* 

22 * 通过 数组 解构 方式 实现 交换 变量 的 值 

| EN 

24 console.10g("---—-------— 数组 解构 方式 实现 交换 变量 的 值 ---------- ee 
之 5 ai zl 了 2 WTARTIODO arrayv destreuctureing 

26 console slog("Array desteucturing — Xr Vr rs 

2 console.log ("x = " + x); 

28 console. lIog ("y= "+ Vy); 

29 console.log("z = " + 2z); 

30 console.log("Exchange x & y & z 's data with array destructuring :"); 
3 [ee // TODO: Exchange data 

四 区 Console .log("x = " + x); 

三 | console.log("y = " + y); 

34 console.log("z = " + 2z); 


S50 /alpt> 


关于 【代码 5-20】 的 分 析 如 下 : 

第 06 一 20 行 代码 通过 传统 方式 (借助 临时 中 间 变 量 ) 实 现 了 交换 变量 的 值 , 关键 部 分 是 第 14 一 
17 行 定义 的 代码 。 

第 24 一 34 行 代码 通过 数组 解构 赋值 实现 了 交换 变量 的 值 ， 关 键 部 分 是 第 31 行 定义 的 代码 ， 
这 里 通过 数组 解构 赋值 方式 交换 了 变量 x、 变 量 y 和 变量 z 的 值 。 

运行 页 面 ， 调 试 信息 如 图 5.20 所 示 。 通 过 数组 解构 赋值 方式 交换 了 变量 x=1、 变 量 y=2 和 变 
量 z=3 的 值 ， 交 换 后 的 结果 为 x=2、y=3、 天 1。 相 比 第 14 一 17 行 代码 定义 的 传统 方式 ， 数 组 解构 
赋值 方式 仅仅 通过 第 31 行 定义 的 一 行 代码 就 实现 了 3 个 变量 值 的 交换 。 





Developer Tools - ECMAScript in 15-days - http://localhost:63342/WebstormProjects/es-15 
区 全 Inspect 回 Conso DD Debugc {} Style Edi @@ Performar 息 Memo 三 Netwo 此 Stora 加- 园 日 鹤 日 辐 


人 曾 时 Filter output _|Persist Logs 
PS 传统 方式 交换 变量 的 值 ------------ ~destructuring-var-tri-exchange.html:27:9 
本 二 卫 -destructuring-var-tri-exchange .htmtL:31:9 
b = 2 -destructuring-var-tri-exchange.html:32:9 
C=3 -destructuring-var-tri-exchange.html:33:9 
Exchange a &b&c 's data by ordinary method : -destructuring-var-tri-exchange.html:34:9 
a=2 -destructuring-var-tri-exchange.html:39:9 
b=3 ~destructuring-var-tri-exchange.html:40:9 
c=1 -destructuring-var-tri-exchange.html:41:9 
2 数组 解构 方式 实现 交换 变量 的 值 ---------- ~destructuring-var-tri-exchange.html:45:9 
Array destructuring - x, y, zZ: -destructuring-var-tri-exchange.html:47:9 
X = 工 -destructuring-var-tri-exchange.htmL:48:9 
y=2 -destructuring-var-tri-exchange.html:49:9 
z=3 “destructuring-var-tri-exchange.html:50:9 
Exchange x & y &z 's data with array destructuring : -destructuring-var-tri-exchange.html:51:9 
xX=2 -destructuring-var-tri-exchange.html:53:9 
y=- 3 “destructuring-var-tri-exchange.html:54:9 
z=1 -destructuring-var-tri-exchange.html:55:9 


5.20 通过 数组 解构 方式 交换 变量 的 值 (2) 
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函数 返回 多 个 值 


通过 ECMAScript 数组 解构 赋值 或 对 象 解构 赋值 的 方式 , 可 以 很 方便 地 实现 函数 返回 多 个 值 的 
操作 ， 有 效 地 扩展 函数 的 使 用 方法 。 

下 面 先 看 一 个 函数 返回 数组 的 代码 示例 ( 详 见 源 代码 ch05 目录 中 的 ch05-es-destructuring- 
func-return-arr.html 文件 ) 。 


【代码 5-21】 

01 <script type="text/javascript"> 

02 USesSEETCE: 

03 A* 

04 * 函数 返回 数组 

05 a 

06 function func return arr() { 

(OM 下 EU 人 [用 已 下 加 "ECMACSCPIDES TLm|s 
08 } 

09 var [sl, s2, s3] = func return arr();// TODO: array destructuring 
10 eongsole, logql"prine  — Sl 9g2093 :ms 
bil eonsole log (sir 527 93)2 

T1200 WaceLpE> 


关于 【代码 5-21】 的 分 析 如 下 : 

第 06 一 08 行 代码 定义 了 一 个 函数 func returm arr0， 通 过 第 07 行 代码 返回 了 一 个 数组 。 

第 09 行 代码 通过 数组 解构 赋值 方式 为 变量 s1、s2 和 s3 分 别 初始 化 了 函数 的 返回 值 。 

运行 页 面 ， 调 试 信息 如 图 5.21 所 示 。 通 过 数组 解构 赋值 方式 为 变量 s1、s2 和 s3 初始 化 了 函 
数 的 返回 值 ， 操 作 后 的 结果 为 s1="Hello"、s2="ECMAScript"、s1="!"。 
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[Ca Inspec Cons Debug Style Ec Perform Mem Netw' Storas 加 =- 园 日 字 日 上 口 


闸 时 Filter output | J Persist Logs 
print - sl1, s2, ss3 : “func-return-arr.html:31:3 
Hello ECMAScript | “func-return-arr.html:32:3 


5.21 ”函数 返回 数组 方式 


下 面 继续 看 一 个 函数 返回 对 象 的 代码 示例 ( 详 见 源 代码 ch05 目录 中 的 ch05-es-destructuring- 
func-return-obj.html 文件 ) 。 


【代码 5-22 】 

01 <script type="text/javascript"> 
02 "Jaensteletn: 

03 es 

04 * 函数 返回 对 象 

05 */ 

06 function func return obj() { 
07 return { 

08 ne. "Hellon. 

09 Se MASGPIDE 
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10 
LL 
下 之 
3 
14 
有 
16 


-hy 
} 
} 
var {h, e, s} = func return obj (); // TODO: object destructuring 
SoOnsoleslog (Spint ob hr eg "ys 
consolesvlioog(ln er es) 


/script> 


关于 【代码 5-22】 的 分 析 如 下 : 

第 06 一 12 行 代码 定义 了 一 个 函数 func returm_ obj0， 通 过 第 07 一 11 行 代码 返回 了 一 个 对 象 。 
第 13 行 代码 通过 对 象 解构 赋值 方式 为 对 象 h、e 和 s 分 别 初始 化 了 函数 的 返回 值 。 

运行 页 面 ， 调 试 信息 如 图 5.22 所 示 。 通 过 对 象 解构 赋值 方式 为 对 象 h、e 和 s 初始 化 了 函数 的 
返回 值 ， 操 作 后 的 结果 为 h="Hello"、e="ECMAScript"、s="!"。 





Developer Tools - ECMAScript in 15-days - http://localh 


[a Inspec Cons Debuc Style Er Perform Mem Netw Storz ~" 园 目 窗 日 可 


茄 时 Filter output Persist Logs 
print obj - h, e, 5s : “func-return-obj.html:35:3 
Hello ECMAScript |! “func-return-obj.html:36:3 


图 5.22 ”函数 返回 对 象 方式 


5.6.3 ”定义 函数 参数 


通过 ECMAScript 数组 解构 赋值 或 对 象 解构 赋值 的 方式 , 可 以 很 方便 地 实现 定义 函数 参数 的 操 
作 ， 有 效 地 扩展 函数 的 使 用 方法 。 

下 面 先 看 一 个 通过 数组 解构 赋值 方式 , 实现 了 定义 有 序 图 数 参数 的 代码 示例 ( 详 见 源 代 码 ch05 
目录 中 的 ch05-es-destructuring-func-params-arr.html 文件 ) 。 
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【代码 5-23】 

01 <script type="text/javascript"> 

02 Se St 

0 /二 

04 * 函数 有 序 参数 

05 Ey 

06 Function Func params arrllxr vr ZI) 

由 及 1 if((x >= y) && (x >= Z)) 

08 return x; 

09 else if(y >= 2z) 

10 return Y; 

Tl else 

12 return 2z; 

TE3 } 

14 consoleslog( find max of func params arr(llr 273] 7); 
LE var max = func params arr([1, 2, 3]);// TODO: array destructuring 
16 console.log("print - max of array = ", max); 

I sd oh 


关于 【代码 5-23】 的 分 析 如 下 : 


第 5 章 解构 


这 段 代 码 通过 数组 解构 赋值 方式 实现 了 定义 有 序 图 数 参数 的 过 程 ， 同 时 该 函数 实现 了 返回 最 
大 值 的 功能 。 

第 06 一 13 行 代码 定义 了 一 个 函数 (func params arr0) ， 其 参数 ([x, y, z]) 定义 为 一 个 数组 
形式 。 

第 07 一 12 行 代码 通过 比较 排序 方式 , 将 函数 的 返回 值 定 义 为 数组 参数 ([x,y, z]) 中 的 最 大 值 。 

第 15 行 代 码 通过 数组 解构 赋值 方式 , 调用 了 第 06 一 13 行 代码 定义 的 函数 (func_params_arr([1， 
2,3])) 。 注 意 ， 这 里 的 参数 是 一 个 有 序 形 式 。 

运行 页 面 , 调试 信息 如 图 5.23 所 示 。 第 16 行 代码 成 功 输出 了 通过 数组 解构 赋值 方式 定义 的 函 
数 参 数 ([x,y,z]) 中 的 最 大 值 (3) 。 


Developer Tools - ECMAScript in 15-days - http://localho 


[a Inspec Cons Debug Style Ec Perform Memr Netw Stora 轩 " 园 目 窜 日 可 


闸 时 Filter output _ | Persist Logs 
find max of func params arr({l, 2, 3] : -func-params-arr.html:35:3 
print - max of array = 3 “func-params-arr.html :37:3 


5.23 ”定义 有 序 函 数 参数 


下 面 继续 看 一 个 通过 对 象 解构 赋值 方式 实现 定义 无 序 函 数 参 数 的 代码 示例 〈 详 见 源 代码 ch05 
目录 中 的 ch05-es-destructuring-func-params-obj.html 文件 ) 。 


【代码 5-24】 

01 <script type="text/javascript"> 

0 之 SeRSEzTeET< 

03 je 

04 * 函数 无 序 参数 

05 Ey 

06 Function Funcparomnsaoon lr wy ail 

07 if((x >= y) && (x >= 2z)) 

08 return x; 

09 else if(y >= 2z) 

10 return y; 

Ikal else 

12 return 2z; 

13 } 

14 eonsoleslogql Fn morx ot Funeoparamgi om Vor dp 
3 var max = func paramSs2oby (lz:17 Vor x ol) // TODO: object destructuring 
16 console.log ("print - max of object = ", max); 


I sl oh >, 


关于 【代码 5-24】 的 分 析 如 下 : 

这 段 代 码 通过 对 象 解构 赋值 方式 ， 实 现 了 定义 无 序 函 数 参 数 的 过 程 ， 同 时 该 函数 实现 了 返回 
最 大 值 的 功能 。 

第 06 一 13 行 代码 定义 了 一 个 函数 func params obj()， 其 参数 {x, y, Zz} 定 义 为 一 个 对 象形 式 。 

第 07 一 12 行 代 码 通过 比较 排序 方式 ， 将 函数 的 返回 值 定 义 为 对 象 参 数 {x, y,z} 中 的 最 大 值 。 

第 1$ 行 代码 通过 对 象 解构 赋值 方式 ,调用 了 第 06 一 13 行 代码 定义 的 图 数 fpnc params_obj({z:1， 
y:2, xX:3})。 注 意 ， 这 里 的 参数 是 一 个 无 序 形式 。 
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运行 页 面 , 调试 信息 如 图 5.24 所 示 。 第 16 行 代 人 码 成 功 输出 了 通过 对 象 解构 赋值 方式 定义 的 函 
数 参 数 {z:1, y:2, x:3} 中 的 最 大 值 3。 


Developer Tools - ECMAScript in 15-days - http://localhost:63342/Webs 





[a Inspecto Consolt Debugge Style Edito Performanc Memon Networ| Storage 轩 ~ 园 目 愉 日 


人 曾 时 Filter output (| Persist Logs 
find max of func params obj({z:1, y:2, x:3}) : "~turing-func-params-obj.html:35:9 
print - max of object = 3 “turing-func-params-obj.html:37:3 

六 | 


eeeneneeneesennen0n00000000000000000000000 


图 5.24 定义 无 序 函数 参数 
we 
5.7 ”本 日 小 结 


本 章 主 要 介绍 了 ECMAScript 6 语法 规范 中 关于 解构 的 知识 ， 包 括 数 组 解构 、 对 象 解构 、 字 符 
串 解构 等 方面 的 内 容 ， 并 通过 一 些 具 体 实例 进行 了 讲解 。 希望 读者 通过 对 本 间 内 容 的 学 习 ， 能 够 打 
好 ECMAScript 脚本 语言 开发 的 基础 。 


二 


本 草 将 介绍 ECMAScript 语法 规范 中 关于 运算 符 与 表达 式 的 内 容 。 表 达 式 是 由 数字 、 运 算 符 、 
分 组 符号 〈 括 号 ) 、 自 由 变量 、 约束 变 量 等 元 素 按照 一 定 规则 组 合 而 成 的 语句 ; 运算 符 是 用 于 执行 
表达 式 运 算 的 核心 元 素 。 本 章 将 会 介绍 ECMAScript 加 性 运算 符 、 乘 性 运算 符 、 一 元 运算 符 、 关 系 
运算 符 、 等 性 运算 符 、 位 运算 符 、 逻 辑 运 算 符 、 赋 值 运算 符 、 条 件 运 算 符 及 其 表达 式 等 方面 的 内 容 。 


6.1 ”ECMAScript 加 性 运算 符 及 表达 式 


ECMAScript 语法 规范 中 将 加 法 (十) 和 减法 (一 ) 运算 符 统 一 称 为 加 性 运算 符 ， 用 于 执行 数 
值 之 间 的 加 减 算 术 运 算 。 


6.1.1 概述 


ECMAScript 语法 规范 中 定义 的 加 性 运算 符 与 表达 式 详 见 表 6.1。 
表 6.1 ECMAScript 加 性 运算 符 与 表达 式 
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ae 
6.1.2 ”加 法 运算 符 及 表达 式 


ECMAScript 语法 规范 中 定义 加 法 运算 符 使 用 符号 “十 ”来 表示 ， 加 法 (十 ) 运算 符 除 了 可 以 
进行 正常 的 数值 运算 外 ， 还 支持 对 类 似 “NaN” 和 “Infinity” 特 殊 值 的 运算 。 此 外 ， 加 法 〈 十 ) 运 
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算 和 从 还 可 以 用 于 字符 串 的 连接 操作 。 
下 面 先 看 一 个 应 用 ECMAScript 加 法 (十 〉 运算 符 的 代码 示例 ( 详 见 源 代码 ch06 目录 中 的 
ch06-es-operator-add.html 文件 ) 。 
【代码 6-1 】 


01 <script type="text/javascript"> 


02 Var a = LL» 

O03 Var b = 2; 

04 Var sum = aa 二 b; 

QS eonsoles log (ST 2 =" TT gum 

06 Var C = NaN; 

07 var d = 123? 

08 Var SumNaN = C 二 d; 

09 Console .log("NaN + 123 = " + SumNaN) ; 

10 Var rx = Tnfinity 

a Var y = 321; 

2 Var sumInfinity = X 十 Y; 

3 consolev do TnEimnity Cli23 = gmineimnibr): 
14 Var SumX = Infinity + Infinity; 

1 eonsole Iogq (InFinity bP Tnfimnity = 0 gm) 
16 Var sumY = -Infinity + -Infinity; 

了 console.log("-Infinity + -Infinity = " + sumY); 
18 Var SumZ = -Infinity + Infinity; 

19 console.log("-Infinity + Infinity = " + sum2); 


200 /scripe> 


关于 【代码 6-1】 的 分 析 如 下 : 

第 02 一 05 行 代 码 定义 了 两 个 变量 a 和 b， 并 通过 加 法 〈 十 ) 运算 符 进行 了 算术 运算 。 其 中 ， 
在 第 04 行 代码 中 就 是 通过 加 法 (十) 运算 符 将 变量 a 和 变量 b 进行 了 算术 相 加 运算 。 

第 06 一 09 行 代码 通过 加 法 (十 ) 运算 符 对 特殊 值 (NaN) 进行 了 算术 运算 。 其中， 第 06 行 代 
码 定义 了 变量 c， 并 初始 化 赋值 为 特殊 值 (NaN) ; 第 08 行 代码 尝试 将 变量 c 与 一 个 具体 数值 进 
行 算术 相 加 运算 ， 并 将 结果 保存 在 变量 sumNaN 中 。 

第 10 一 13 行 代 码 通过 加 法 〈 十 ) 运算 符 对 特殊 值 (Infinity) 进行 了 算术 运算 。 其 中 ， 第 10 
行 代 码 定义 了 变量 x， 并 初始 化 赋值 为 特殊 值 (Infinity) ; 第 12 行 代码 尝试 将 变量 x 与 一 个 具体 
数值 进行 算术 相 加 运算 ， 并 将 结果 保存 在 变量 sumInfinity 中 。 

第 14 和 第 15 行 代码 通过 加 法 (十 ) 运算 符 对 特殊 值 (Infinity) 和 特殊 值 (Infinity) 进行 了 算 
术 运 算 ， 并 将 结果 保存 在 变量 sumX 中 。 

第 16 和 第 17 行 代码 通过 加 法 (十 ) 运算 符 对 特殊 值 (-Infinity) 和 特殊 值 〈-Infinity) 进行 了 
算术 运算 ， 并 将 结果 保存 在 变量 sumY 中 。 

第 18 和 第 19 行 代码 通过 加 法 〈 二 ) 运算 符 对 特殊 值 〈-Infinity) 和 特殊 值 (Infinity) 进行 了 
算术 运算 ， 并 将 结果 保存 在 变量 sumZ 中 。 

运行 页 面 ， 调 试 信息 如 图 6.1 所 示 。 

如 图 6.1 所 示 , 从 第 09 行 代码 的 输出 结果 来 看 , 特殊 值 (NaN ) 与 数值 相 加 后 结果 仍 为 (NaN ) ; 
从 第 13 行 代码 的 输出 结果 来 看 ， 特 殊 值 (Infinity) 与 数值 相 加 后 结果 也 仍 为 (Infinity) 。 

另外 ， 特 殊 值 (Infinity) 和 特殊 值 (Infinity) 相 加 后 ， 结 果 仍 为 特殊 值 (Infinity) ; 特殊 值 
(C-Infinity) 和 特殊 值 (-Infinity) 相 加 后 ， 结 果 仍 为 特殊 值 (-Infinity) ; 特殊 值 (-Infinity ) 和 特 
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殊 值 (Infinity〉 相 加 后 ， 结 果 变 化 为 特殊 值 (NaN) ， 表 示 不 是 一 个 有 效 数 值 。 
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CR Inspect Conso Debugg Style Edii Performa Memo Netwo Storac 轩 " 园 目 窗 口 了 可 


人 曾 时 Filter output -PersistLogs 
和 二 过硬 chO6-es-operator-add.html :26:3 
NaN + 123 = NaN ch06-es-operator-add.html :30:3 
Infinity + 123 = Infinity ch06-es-operator-add.html :34:3 
Infinity + Infinity = Infinity ch06-es-operator-add.html :36:3 
-Infinity + -Infinity = -Infinity chO6-es-operator-add.html :38:3 
-Infinity + Infinity = NaN ch06-es-operator-add.html :40:3 
Doe 
DN 


6.1 ECMAScript 加 法 (十 ) 运算 符 
下 面 再 看 一 个 应 用 ECMAScript 加 法 (十 ) 运算 符 进行 字符 串 连 接 操作 的 代码 示例 ( 详 见 源 代 
码 ch06 目录 中 的 ch06-es-operator-add-str.html 文件 ) 。 
【代码 6-2 】 


01 <script type="text/javascript"> 


02 Var strHello = "Hello"; 

03 Var strECMA = "ECMAScript"; 

04 consoles loo (strHello TT™ CotrECMA Pin)s 
号 var 1 = ]; 

06 var strN = TO"; 

07 SoOnsole log(li 1 SeeN)> 

08 console.log(strN + i); 


0 <Wseript> 


关于 【代码 6-2】 的 分 析 如 下 : 

第 02 一 04 行 代 码 定 义 了 两 个 字符 串 变量 strHello 和 strECMA。 其 中 , 在 第 04 行 代码 中 通过 加 
法 (十 ) 运算 符 进 行 了 字符 串 连接 操作 ， 并 增加 了 空格 和 标点 符号 。 

第 05 一 08 行 代码 通过 加 法 (十 ) 运算 符 对 字符 串 和 数值 进行 了 连接 操作 。 其 中 ， 第 05 行 代码 
定义 了 变量 i, 并 初始 化 赋值 为 数值 1; 第 06 行 代码 定义 了 变量 strN, 并 初始 化 赋值 为 字符 串 ("8"， 
为 数值 字符 串 ) ; 第 07 行 代码 尝试 通过 加 法 (十) 运算 符 将 变量 i 与 变量 strN 进行 连接 操作 ， 具 
体 来 说 就 是 将 数值 与 字符 串 进 行 连接 操作 ; 第 08 行 代 码 与 第 07 行 代 码 相 反 ， 尝 试 通过 加 法 (+) 
运算 符 将 变量 strN 与 变量 i 进行 连接 操作 ， 具 体 来 说 就 是 将 字符 串 与 数值 进行 连接 操作 。 

运行 页 面 ， 调 试 信息 如 图 6.2 所 示 。 从 第 04 行 代码 的 输出 结果 来 看 ， 加 法 (十) 运算 符 也 可 
以 用 于 字符 串 连接 操作 。 男 外 ， 从 第 07 和 第 08 行 代码 的 输出 结果 来 看 ， 对 字符 串 与 数值 使 用 加 法 

(+) 运算 符 进行 连接 操作 时 ， 数 值 类 型 会 被 转换 为 字符 串 类 型 ， 然 后 进行 字符 串 连接 操作 。 即 使 
字符 串 为 数值 类 的 字符 串 ， 参 考 第 06 行 代码 定义 的 变量 sttN， 也 是 进行 字符 串 连 接 操 作 ， 而 不 会 
与 数值 进行 算术 运算 。 
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从 时 Filter output | | Persist Logs 
Hello ECMAScript! ~0perator-add-str.html:25:3 
| 18 “Operator-add-str.html:28:3 
81 “Operator-add-str.html:29:3 
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6.2 ”ECMAScript 加 法 (十 ) 运算 符 连 接 字 符 串 
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6.1.3 ”减法 运算 从 及 表达 式 


ECMAScript 语法 规范 中 规定 减法 运算 符 使 用 符号 “一 ”来 表示 。 减 法 (一 ) 运算 符 除了 可 以 
进行 正常 的 数值 运算 外 ， 还 文 持 对 类 似 “NaN” 和 “Infinity” 特 殊 值 的 运算 。 

下 面 看 一 个 应 用 ECMAScript 减法 (一 ) 运算 符 的 代码 示例 〈 详 见 源 代码 ch06 目录 中 的 
ch06-es-operator-minus.html 文件 ) 。 

【代码 6-3 】 


01 <script type="text/javascript"> 


02 Var a = 2; 

03 var DEL 

04 Var minusNumA = a- b; 

05 console.log("2-1= "+ minusNumA); 

06 var minusNumB = a.toString() - b; 

07 consSsole .log('"2" -1 = "+ minusNumB); 

08 Var minusStr = "ECMAScript" - 123; 

09 console.log('"ECMAScript" - 123 = " + minusStr); 
10 Var C = NaN; 

| Var d = 123; 

2 var minusNaNA = co- dd; 

二 console.log("NaN - 123 = " + minusNaNA); 

14 Var minusNaNB = d- c; 

15 Console .log("123 - NaN = " + minusNaNB) ; 

16 var x = Infinity; 

地 人 

18 Var minusSsInfinityRA = X 一 y; 

19 console.log ("Infinity - 321 = "+ minusInfinityA); 
20 Var minusIinfinityB = Y - x; 

之 下 console .log("321 - Infinity = " + minusIinfinityB); 
之 之 Var minusA = Infinity - Infinity; 

23 console.log ("Infinity - Infinity = " + minusA); 
24 Var minusB = -Infinity - -Infinity; 

2 console.log("-Infinity - -Infinity = ”十 minusB); 
26 var minusC = -Infinity - Infinity; 

21 console.log("-Infinity - Infinity = " + minusC); 
26 Var minusD = Infinity - -Infinity; 

29 console .log("Infinity - -Infinity = " + minusD); 


S30 /enpe> 


关于 【代码 6-3】 的 分 析 如 下 : 

第 02 一 05 行 代码 定义 了 两 个 变量 a 和 b， 并 通过 减法 (一 ) 运算 符 进行 了 算术 和 运算。 其中， 
在 第 04 行 代码 中 就 是 通过 减法 (一) 运算 符 将 变量 a 和 变量 b 进行 了 算术 相 减 运算 。 

第 06 和 第 07 行 代 码 在 第 02 一 05 行 代 码 的 基础 上 做 了 一 些 修改 ， 即 先 将 变量 a 转换 为 字符 串 
类 型 ， 再 通过 减法 (一) 运算 从 与 变量 b 进行 了 算术 相 减 运算 。 

第 08 和 第 09 行 代码 通过 减法 (一) 运算 符 对 一 个 字符 串 〈"EcmaScript") 和 数值 (123) 进 
行 了 相 减 运算 。 

第 10 一 15 行 代码 通过 减法 (一) 运算 符 对 特殊 值 (NaN) 进行 了 算术 运算 。 其 中 ， 第 10 行 代 
码 定义 了 变量 c， 并 初始 化 赋值 为 特殊 值 (NaN) ; 第 12 行 和 第 14 行 代码 分 别 尝试 将 变量 c 与 一 
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个 具体 数值 进行 减法 运算 。 

第 16 一 21 行 代码 通过 减法 〈 一 ) 运算 符 对 特殊 值 Infinity) 进行 了 算术 和 运算。 其中， 第 16 
行 代 码 定 义 了 变量 x， 并 初始 化 赋值 为 特殊 值 (Infinity) ; 第 18 行 和 第 20 行 代 码 分 别 尝试 将 变量 
x 与 一 个 具体 数值 进行 相 减 运算 。 

第 22 和 第 23 行 代 码 通过 减法 〈 一 ) 运算 符 对 特殊 值 (Infinity) 和 特殊 值 (Infinity) 进行 了 
算术 运算 ， 并 将 结果 保存 在 变量 minusA 中 。 

第 24 和 第 25 行 代码 通过 减法 〈 一 ) 运算 符 对 特殊 值 〈(-Infinity〉 和 特殊 值 (-Infinity〉 进 行 了 
算术 运算 ， 并 将 结果 保存 在 变量 minusB 中 。 

第 26 和 第 27 行 代码 通过 减法 〈 一 ) 运算 符 对 特殊 值 〈-Infinity) 和 特殊 值 Infinity) 进行 了 
算术 运算 ， 并 将 结果 保存 在 变量 minusC 中 。 

第 28 和 第 29 行 代码 通过 减法 〈 一 ) 运算 符 对 特殊 值 (Ifinity) 和 特殊 值 〈-Infinity) 进行 了 
算术 运算 ， 并 将 结果 保存 在 变量 minusD 中 。 

运行 页 面 ， 调 试 信息 如 图 6.3 所 示 。 





Developer Tools - ECMAScript in 15-days - http://localhost:63342/W: 
[a Inspectc Consol Debugge Style Edite Performanc Memor Networ Storag' 团 " 园 目 窜 日 可 


商 守 Filter output _| Persist Logs 
" 是 全 ch66-es-operator-minus ,html:26;3 
Ei | che6-es-operator-minus.html :28:3 
"ECMAScript”- 123 = NaN che6-es-operator-minuys.html :30:3 
| NaN - 123 = NaN ch66-es-operator-minus,html:347;3 
123 - NaN = NaN ch66-es-operator-minus .html1:36:3 
Infinity - 321 = Infinity ch66-es-Dperator-minus .html:I46:3 
321 - _ Infinity = -Infinity ch66-es-operator-minus,.htmil:42;3 
Infinity - Infinity = NaN ch66-es-operator-minus.htmil:44:3 
-Infinity - -Infinity = NaN ch66-es-operator-minus .html:46;3 
-Infinity - Infinity = -Infinity ch86-es-operator-minus.html:48:3 
Infinity - -Infinity = Infinity ch66-es-operator-minus ,html :50:3 

消 | | 


图 6.3 ECMAScript 减法 (一) 运算 符 


如 图 6.3 所 示 ， 从 第 07 行 代码 的 输出 结果 来 看 ， 将 数值 转换 为 字符 串 后 再 执行 减法 (一 ) 操 
作 ， 仍 可 以 得 出 正确 的 计算 结果 ; 从 第 09 行 代码 的 输出 结果 来 看 ， 对 于 非 数 值 类 的 字符 串 与 数值 
进行 减法 (一 ) 操作 ， 得 出 的 结果 为 “NaN”。 

从 第 13 行 和 第 15 行 代码 的 输出 结果 来 看 ， 特 殊 值 (NaN) 与 数值 执行 减法 (一 ) 操作 后 ， 结 
果 仍 为 (NaN) 。 

从 第 19 行 和 第 21 行 代码 的 输出 结果 来 看 ， 特 殊 值 Infinity) 与 数值 执行 减法 〈 一 ) 操作 后 ， 
结果 仍 为 (Infinity) 。 

从 第 23 行 代 码 输 出 的 结果 来 看 ， 特 殊 值 (Infinity) 和 特殊 值 (Infinity) 执行 减法 (一 ) 操作 
后 ， 结 果 为 特殊 值 (NaN) 。 

从 第 25 行 代码 输出 的 结果 来 看 ， 特 殊 值 (-Infinity) 和 特殊 值 (-Infinity) 执行 减法 〈 一 ) 操 
作 后 ， 结 果 仍 为 特殊 值 (NaN) 。 

从 第 27 行 代 码 输出 的 结果 来 看 ， 特 殊 值 (-Infinity) 和 特殊 值 (Infinity) 执行 减法 〈 一 ) 操作 
后 ， 结 果 为 特殊 值 〈-Infinity) 。 

从 第 29 行 代 码 输 出 的 结果 来 看 ， 特 殊 值 (Infinity) 和 特殊 值 (-Infinity) 执行 减法 (一) 操作 
后 ， 结 果 为 特殊 值 (Infinity) 。 
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6.2 “ECMAScript 乘 性 运算 符 及 表达 式 


ECMAScript 语法 规范 中 将 乘法 (*) 、 除 法 (/) 和 模 数 (%) 运算 符 统 一 称 为 乘 性 运算 符 ， 
用 于 执行 数值 之 间 的 乘除 和 取 余 算术 运算 。 


B24 


乘 性 运算 人 符 与 表达 式 概 述 
ECMAScript 语法 规范 中 定义 的 乘 性 运算 符 与 表达 式 详 见 表 6.2。 
表 6.2 ECMAScript 乘 性 运算 符 与 表达 式 


| 36 ls 


条 | 





6.2.2 ”乘法 运算 从 及 表达 式 


ECMAScript 语法 规范 中 定义 乘法 运算 符 使 用 符号 “*” 来 表示 。 乘 法 (*) 运算 符 除了 可 以 进 
行 正常 的 数值 运算 外 ， 还 支持 对 类 似 “NaN” 和 “Infinity” 特 殊 值 的 运算 。 

下 面 看 一 个 应 用 乘法 (*) 运算 符 的 代码 示例 ( 详 见 源 代 人 码 ch06 目录 中 的 ch06-es-operator- 
multiple.html 文件 ) 。 
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【代码 6-4】 

01 <script type="text/javascript"> 

02 Var a = 135; 

EE Var b = 246; 

04 Var mul = a * b; 

05 Sonmnsolec lot L359 T2406 = 1 mls 

06 Var e = lel1001; 

07 Var mulE = ee * er; 

08 Console .log("1el001 * lel001 = " + mulE); 
09 Var mulEE = -~e * er; 

10 console .log ("-1le1001 * le1001 = " + mulEE); 
二 Var c = NaN; 

1 be var d= 3 

| Var mulNaN = C * gd; 

14 console.log("NaN * 5= "+ mulNaN)， 

13 var x — Intimiey: 

16 var y = 0; 

Te var mintfinity = 二 下 

18 eonsole. LIog (le TnEiniEy 0 = mlinrtnity)s 
19 Var Z = 1; 

20 mar em mr 
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忆 1 Console Toog( TnFanity * = mL 

22 Var ZZ = -1} 

之 Tamenles 3 

24 console.log("Infinity * (-1) = "+ mual22)， 

23 war mlMal = Tnfinity -Tnfinity, 

26 eonsole log( TnEamity * Infimnity II mLMul): 


ZI cript> 


关于 【代码 6-4】 的 分 析 如 下 : 

第 02 一 05 行 代 码 定义 了 两 个 变量 a 和 b， 并 通过 乘法 (*) 运算 符 进行 了 算术 运算 。 其 中 ， 在 
第 04 行 代码 中 就 是 通过 乘法 〈*) 运算 符 将 变量 a 和 变量 b 进行 了 算术 相 乘 运算 。 

第 06 一 10 行 代码 通过 乘法 (*) 运算 符 进 行 了 生成 无 穷 大 数 的 计算 。 其 中 ， 第 06 行 代码 定义 
了 一 个 变量 e， 并 初始 化 为 科学 记 数 法 数值 (le1001) ; 第 07 行 和 第 09 行 代码 使 用 乘法 (*) 运 
算 符 分 别 计 算 了 数值 (1e1001) 的 正 负 平方 值 。 

第 11 一 14 行 代码 通过 乘法 (*) 运算 符 分 别 对 特殊 值 (NaN) 进行 了 算术 运算 。 其 中 ,第 11 
行 代 码 定义 了 变量 c， 并 初始 化 赋值 为 特殊 值 (NaN) ; 第 13 行 代码 尝试 将 变量 c 与 一 个 具体 数 
值 进行 算术 相 乘 运算 。 

第 15 一 24 行 代码 通过 乘法 (*) 运算 符 对 特殊 值 (Infinity) 进行 了 算术 运算 。 其 中 ， 第 15 行 
代码 定义 了 变量 x， 并 初始 化 赋值 为 特殊 值 (Infinity) ; 第 17 行 代 码 尝试 将 变量 x 与 数值 (0) 进 
行 算术 相 乘 运算 ; 第 20 行 代码 尝试 将 变量 x 与 非 零 数 值 1 进行 算术 相 乘 运算 ; 第 23 行 代码 尝试 将 
变量 x 与 非 零 数值 (-1) 进行 算术 相 乘 运算 。 

第 25 和 第 26 行 代码 通过 乘法 (*) 运算 符 对 特殊 值 (Infinity) 和 特殊 值 (Imfinity) 进行 了 得 
术 运 算 。 

运行 页 面 ， 调 试 信 息 如 图 6.4 所 示 。 








Developer Tools - ECMAScript in 15-days - http://localhost:633427V 
a Inspectc Consol Debuggt Style Edit Performan Memor Networ Storag 轩 " 轩 目 窜 日 I 





会 时 Filter output _| Persist Logs 
135 * 246 = 33210 “es-operator-multiple.html :26:3 
lel691 + lel991 = Infinity -es-Operator-multipte.htmL:29:3 
-lel6991 * lel6961 = -Infinity “es5-0perator-multiple.html :31:3 

| NaN * 5 = NaN "eS5-Operator-multiple.html :35:3 
Infinity * 8 = NaN “es-Operator-multiple.html:39:3 
Infinity * 1 = Infinity “es-operator-multiple.html :42:3 
Infinity * (-1) = -Infinity “es-0perator-multiple.html:45:3 
Infinity * Infinity = Infinity “es-oOperator-multiple.html :47:3 

>| 


6.4 ” ECMAScript 乘法 (*) 运算 符 


如 图 6.4 所 示 ， 从 第 08 行 和 第 10 行 代码 的 输出 结果 来 看 ， 如 果 乘 法 运算 后 结果 太 大 或 太 小 ， 
生成 的 结果 就 是 特殊 值 (Infinity 或 -Infinity) 。 

从 第 14 行 代码 的 输出 结果 来 看 ， 特 殊 值 (NaN) 与 数值 相 乘 后 结果 为 特殊 值 (NaN) 。 

从 第 18 行 代码 的 输出 结果 来 看 ， 特 殊 值 (Infinity) 与 数值 (0) 相 乘 后 结果 为 特殊 值 (NaN) 。 

从 第 21 和 第 24 行 代码 的 输出 结果 来 看 ， 特 殊 值 (Infinity) 与 非 零 数 值 (如 1 或 -1) 相 乘 后 结 
果 为 特殊 值 (Infinity 或 -Infinity) 。 
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另外 , 如 果 特 殊 值 (Infinity ) 与 特殊 值 (Infinity ) 进行 相 乘 运算 后 ,结果 仍 为 特殊 值 (Infinity ) 。 


6.2.3 ”除法 运算 符 及 表达 式 


ECMAScript 语法 规范 中 定义 除法 运算 符 使 用 符号 “/” 来 表示 。 除 法 〈/) 运算 从 除了 可 以 进 
行 正 常 的 数值 运算 外 ， 还 支持 对 类 似 “NaN” 和 “Infinity” 特 殊 值 的 运算 。 

下 面 看 一 个 应 用 除法 〈/) 运算 符 的 代码 示例 ( 详 见 源 代码 ch06 目录 中 的 ch06-es-operator- 
divide.html 文件 ) 。 


【代码 6-5 】 

01 <script type="text/javascript"> 

02 var = 8 

EE var T= U0 

04 var sum = i / j; 

05 consoles loglol20 TENE SSUmj 

06 Var a = le-1001; 

07 Var sumAA = 1 / a; 

08 console.log("1 / le-1001 = " + sumAA); 

09 var sumAB = -1 / a; 

10 console.log("-1 / le-1001 = " + sumAB); 

1 var p = NaN; 

| VAT dO = 2 

13 var sumNaNA =p/ qa; 

14 console.log("NaN / 2= "+ sumNaNA); 

15 var sumNaNB = gq / p; 

16 console.log("2 / NaN = " + sumNaNB); 

lg var SumZero = 2 / 0; 

18 console.log("2 /0=" + sumZzero); 

19 var sumInfinityA = Infinity / 2; 

20 eonsole slog (InfEinity /2 = suminfimmnieyva)s 
2 var sumInfinityB = Infinity / (-2) ; 

ph console .log ("Infinity / -2= "+ sumIinfinityB); 
23 var sumIinfinityZero = Infinity / 0; 

24 eonsoles logqlr inEinitEy 0 = smintini eyero)s 
25 var sumSum = Infinity / Infinity; 

26 console.log("Infinity / Infinity = " + sumSum); 


2 /Criot> 


关于 【代码 6-5】 的 分 析 如 下 : 

第 02 一 05 行 代码 定义 了 两 个 变量 1 和 j， 并 通过 除法 (/) 运算 符 进 行 了 算术 运算 。 其 中 ， 在 
第 04 行 代码 中 就 是 通过 除法 〈/) 运算 符 将 变量 1 和 变量 j 进行 了 算术 除法 运算 。 

第 06 一 10 行 代码 通过 除法 〈/) 运算 符 进 行 了 无 穷 大 的 计算 。 其 中 ， 第 06 行 代码 定义 了 一 个 
变量 a， 并 初始 化 为 科学 记 数 法 数值 (le-1001) ; 第 07 和 第 09 行 代码 使 用 除法 〈/) 运算 符 分 别 
计算 了 数值 〈 正 负 1) 除 以 数值 (1e-1001) 的 结果 。 

第 11 一 16 行 代码 通过 除法 (/) 运算 符 分 别 对 特殊 值 (NaN) 进行 了 算术 和 运算。 其中， 第 11 
行 代 码 定义 了 变量 p， 并 初始 化 赋值 为 特殊 值 (NaN) ; 第 13 行 代码 尝试 将 变量 p 与 一 个 具体 数 
值 (2) 进行 算术 除法 运算 ; 第 15 行 代码 尝试 将 一 个 具体 数值 (2) 与 变量 p 进行 算术 除法 运算 。 

第 17 和 第 18 行 代码 通过 除法 (/) 运算 符 计算 了 数值 (2) 除 以 数值 (0) 的 结果 ， 也 就 是 除 
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数 为 零 的 运算 。 

第 19 一 24 行 代码 通过 除法 (/) 运算 符 对 特殊 值 (Infinity) 进行 了 算术 运算 。 其 中 ， 第 19 行 
代码 计算 了 特殊 值 (Infinity) 除 以 非 零 数值 (2) 的 结果 ; 第 21 行 代 码 计 算 了 特殊 值 (Infinity) 除 
以 非 零 数 值 (-2) 的 结果 ; 第 23 行 代码 计算 了 特殊 值 (Infinity) 除 以 数值 (0) 的 结果 。 

第 25 和 第 26 行 代码 通过 除法 (/) 运算 符 对 特殊 值 Infinity) 和 特殊 值 (Infinity) 进行 了 算 
术 除 法 运算 ， 并 将 结果 保存 在 变量 sumSum 中 。 

运行 页 面 ， 调 试 信息 如 图 6.5 所 示 。 





Developer Tools - ECMAScript in 15-days - http://localhost:63342/Web: 


CR Inspecto Consolt Debugge Style Editc Performanc Memon Networ| Storage 轩 ~" 园 上 日 窗 日 可 


从 是 Filter output _| Persist Logs 
128 / 16 = 8 ch06-es-operator-divide.html:26:3 
| 1 / le-10961 = Infinity ch06-es-operator-divide.html:29:3 
-1 / le-16901 = -Infinity che6-es-operator-divide.html:31:3 
NaN / 2 = NaN ch06-es-operator-divide.html:35:3 
2 / NaN = NaN chO6-es-operator-divide.html :37:3 
2/ 09 = Infinity ch06-es-operator-divide.html :39:3 
Infinity / 2 = Infinity chO6-es-operator-divide.html:4]1:3 
Infinity / -2 = -Infinity chO6-es-operator-divide.html:43:3 
Infinity / 0 = Infinity ch06-es-operator-divide.html :45:3 
Infinity / Infinity = NaN ch06-es-operator-divide.html:;47:3 

> 


Densnsensnsnsnsenensennnsnsntennentnmn nm id 


6.5 ECMAScript 除法 〈/) 运算 符 


如 图 6.5 所 示 ， 从 第 08 和 第 10 行 代码 的 输出 结果 来 看 ， 如 果 除 法 运算 后 结果 太 大 或 太 小 ， 生 
成 的 结果 就 是 特殊 值 (Infinity 或 -Infinity) 。 

从 第 14 和 第 16 行 代 码 的 输出 结果 来 看 ， 特 殊 值 (NaN) 与 数值 进行 除法 运算 后 结果 仍 为 特殊 
值 (NaN) 。 

从 第 18 行 代码 的 输出 结果 来 看 ,特殊 值 (Infinity) 除 以 数值 (0) 后 结果 为 特殊 值 (Infinity) 。 

从 第 20 和 第 22 行 代码 的 输出 结果 来 看 ， 特 殊 值 (Infinity〉 除 以 非 零 数值 (如 2 或 -2) 后 结 
果 为 特殊 值 (Infinity 或 -Infinity) 。 

从 第 24 行 代 码 的 输出 结果 来 看 , 特殊 值 (Infinity) 除 以 数值 (0) 后 结果 为 特殊 值 (Infinity) 。 

另外 , 如 果 执 行 特 殊 值 (Infinity ) 除 以 特殊 值 (Infinity ) 的 算术 运算 , 则 其 结果 为 特殊 值 (NaN) 。 


6.2.4 ” 取 模 运算 从 及 表达 式 


ECMAScript 语法 规范 中 定义 取 模 运算 符 使 用 百分数 符号 “%” 来 表示 。 取 模 (%) 运算 符 除 
了 可 以 进行 正常 的 数值 运算 外 ， 还 文 持 对 类 似 “NaN” 和 “Infinity” 特 殊 值 的 运算 。 

下 面 看 一 个 应 用 取 模 《〈%) 运算 符 的 代码 示例 ( 详 见 源 代码 ch06 目录 中 的 ch06-es-operator- 
mod.html 文件 ) 。 


【代码 6-6 】 

01 <script type="text/javascript"> 
02 var a= 5; 

03 var b= 3} 

04 Var mod = a%s b; 
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本 ECGnScleReog( S33 = "mod 

06 Var modZeroDiv = 0 % 2; 

07 console.log("0 % 2= "+ modZeroDiv); 

08 Var modDivZero = 2 % 0; 

09 console.log("2 % 0= "+ modDivZero); 

0 var modIinfinityDiv = Infinity % 2; 

a econsole。 Log("Tinfinity 2 = FmodintinityDiv)es 
a var modlinfinityInftinity = Tnfinity SY Infinitye 
3 econsoles loogl InfinTtey SS Tnrinity = TT modlnfinlitylintintity 
14 var modDiyvyinEinity = 2 % Tnfinitys 

15 Console log(2 5% THFIinEy = modDirIintinity) 


T0000N /semipt> 


关于 【代码 6-6】 的 分 析 如 下 : 

第 02 一 05 行 代码 定义 了 两 个 变量 a 和 b， 并 通过 取 模 (%) 运算 符 进 行 了 算术 运算 。 其 中 ， 
在 第 04 行 代码 中 就 是 通过 取 模 (%) 运算 符 将 变量 a 和 变量 b 进行 了 算术 取 模 运算 。 

第 06 和 第 07 行 代码 通过 取 模 (%) 运算 符 对 被 除数 为 数值 (0〉 、 除 数 为 非 零 数值 进行 取 模 
运算 。 
类 似 的 ， 第 08 和 第 09 行 代码 通过 取 模 (%) 运算 符 对 除数 为 数值 (0) 、 被 除数 为 非 零 数值 
进行 取 模 运算 。 

第 10 和 第 11 行 代码 通过 取 模 (%) 运算 符 对 被 除数 为 特殊 值 (Infinity) 的 情况 进行 了 取 模 运 
算 。 

第 12 和 第 13 行 代码 通过 取 模 (%) 运算 符 对 被 除数 和 除数 均 为 特殊 值 (Infinity) 的 情况 进行 
了 取 模 运算 。 

第 14 一 15 行 代码 通过 取 模 (%) 运算 符 对 除数 为 特殊 值 〈Infinity〉 的 情况 进行 了 取 模 运算 。 

运行 页 面 ， 调 试 信息 如 图 6.6 所 示 。 





Developer Tools - ECMAScript in 15-days - http://localhost:63342 
中 Inspect Conso Debugg Style Edit Performar Memo Netwo Storac 轩 ~ 园 目 窜 日 可 


会 时 Filter output _ | Persist Logs 
5 和 3= 2 ch96-es-Operator-mod .htmt:26;3 
es2=6 ch96-es-operator-mod.htmt:28:3 
2%0 = NaN ch06-es-operator-mod.html :30:3 
Infinity % 2 = NaN ch06-es-operator-mod.html:32:3 
Infinity % Infinity = NaN ch06-es-operator-mod.html :34:3 

2 % Infinity = 2 chg6-es-operator-mod.html :36:3 

> | 


Lr 


6.6 ” ECMAScript 取 模 (%) 运算 符 


如 图 6.6 所 示 ， 从 第 05 行 代码 的 输出 结果 来 看 ， 表 达 式 (5 % 3 = ) 的 运算 结果 为 数值 (2) ， 
与 取 余 数 的 结果 一 致 。 

从 第 07 行 代码 的 输出 结果 来 看 ， 表 达 式 (0 % 2 = ) 的 运算 结果 为 数值 (0) ， 与 取 余数 的 结 
果 一 致 。 

从 第 09 行 代 码 的 输出 结果 来 看 ， 表 达 式 (2 % 0 = ) 的 运算 结果 为 特殊 值 (NaN) ， 因 为 除 
数 为 零 的 取 模 运算 是 无 意义 的 ， 所 以 结果 为 特殊 值 (NaN) 。 

从 第 11 行 代码 的 输出 结果 来 看 ， 表 达 式 (Infinity % 2 = ) 的 运算 结果 为 特殊 值 (NaN) ， 因 
为 对 特殊 值 (Infinity) 进行 取 模 运算 也 是 无 意义 的 ， 所 以 结果 为 特殊 值 (NaN) 。 
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从 第 13 行 代 码 的 输出 结果 来 看 ,表达 式 (Infinity % Infinity = ) 的 运算 结果 为 特殊 值 (NaN ) ， 
说 明 特 殊 值 (Infinity) 对 特殊 值 (Infinity) 取 模 也 是 没有 意义 的 。 
从 第 15 行 代码 的 输出 结果 来 看 ， 表 达 式 (2 % Infinity = ) 的 运算 结果 为 数值 (2) ， 这 就 说 
明 对 任意 数值 使 用 除数 为 特殊 值 (Infinity) 进行 取 模 运算 ， 结 果 均 为 被 除数 的 数值 本 身 。 


6.3 “ECMAScript 一 元 运算 符 及 表达 式 


ECMAScript 语法 规范 中 对 只 有 一 个 参数 (对 象 或 值 ) 进行 操作 的 运算 符 ,， 统 称 为 一 元 运算 符 。 
一 元 运算 和 从 包括 new、delete、void、 增 减 量 运算 、 一 元 加 减法 等 ， 下 面 对 这 些 一 元 运算 符 逐 一 进 
行 介 绍 。 


6.3.1 运算 符 与 表达 式 概述 


ECMAScript 语法 规范 中 定义 的 一 元 运算 符 与 表达 式 详 见 表 6.3。 


表 6.3 ECMAScript 一 元 运算 符 与 表达 式 


rr rr DIE 
_delete | 清除 或 删除 对 已 存在 对 象 的 属性 或 方法 的 引用 “| deleteobjprop |/ | 
vod | 对 ft 人 da efneg | 

EE 


Hl 1 
> ar ho 
+ 
-A 





6.3.2 new 和 delete 运算 符 及 表达 式 


对 于 new 和 delete 运算 人 符 ， 相 信和 学 习 过 C 语言 或 Java 语言 的 读者 一 定 不 陌生 。ECMAScript 
语法 规范 中 规定 new 运算 符 用 于 创建 新 的 对 象 ， 而 delete 运算 符 用 于 删除 对 已 存在 对 象 的 属性 或 
方法 的 引用 。 

这 里 需要 注意 的 是 ，ECMAScript 脚本 语言 与 C 语言 和 Java 语言 略 有 不 同 ，ECMAScript 语法 
规范 中 没有 “类 ”的 概念 ， 只 有 “对 象 ”的 概念 。 其 实 ，ECMAScript 中 的 对 象 与 C 和 Java 语言 中 
的 类 , 在 含义 、 功 能 和 用 法 上 基本 类 同 。 读者 把 ECMAScript 脚本 语言 中 的 对 象 当 作 C 语言 和 Java 
语言 中 的 类 来 理解 ， 是 完全 没有 问题 的 。 

下 面 看 一 个 应 用 new 和 delete 运算 从 的 代码 示例 ( 详 见 源 代码 ch06 目录 中 的 ch06-es-operator- 
new-delete.html 文件 ) 。 

【代码 6-7】 


01 <script type="text/javascript"> 
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02 // obj test 

03 console.log("delete obj :"); 

04 Var obj = new Object; 

QS obj .userid = "M10"; 

06 obj .username = "Leo Messi"; 

07 obj .gentle = "male"; 

08 console, log ("userid "TT obi.userid)}: 
09 console.log ("username : " + obj .username); 
10 console.log("gentle : " + obj.gentle); 
bl console.1og (obj); 

12 delete obj .gentle; 

下 console .log (obj); 

14 delete obj .username: 

5 console.1og (obj); 

6 delete obj .userid; 

yb console .log(obj) :; 

18 obj = null; 

19 // obj2 test 

20 console.log("delete obj2 :"); 

21 Var obj2 = new Object; 

2 obj2.userid = "M10"; 

2 习 obj2.username = "Leo Messi";} 

24 obj2.gentle = "male"; 

六 5 console.1log (obj2); 

26 delete obj2; 

2 了 console.1og (obj2); 

28 obj2 = null; 

29 console.1og (obj2); 


30</secript> 


关于 【代码 6-7】 的 分 析 如 下 : 

第 04 行 代码 通过 new 运算 从 创建 了 一 个 对 人 象 obj (var obj = new Object; ) ， 并 在 第 05 一 07 行 
代码 中 为 该 对 象 obj 定义 了 3 个 属性 ， 同 时 初始 化 了 有 具体 属性 值 。 

第 08 一 10 行 代码 分 别 通过 对 象 obj 的 3 个 属性 输出 了 其 属性 值 , 第 11 行 代码 则 是 直接 通过 对 
象 obj 输出 了 其 全 部 属性 值 。 

第 12、 第 14 和 第 16 行 代码 依次 通过 delete 运算 符 删 除了 对 象 obj 的 3 个 属性 ， 同 时 第 13、 
第 15 和 第 17 行 代 码 在 每 次 delete 运算 后 ， 输 出 了 对 象 obj 的 全 部 属性 值 。 

第 21 一 29 行 代 码 与 前 面 的 代码 类 似 ， 不 同 之 处 在 于 第 26 行 代码 中 ,我 们 尝试 直接 通过 delete 
运算 符 删 除 对 象 obj2。 

运行 页 面 ， 调 试 信息 如 图 6.7 所 示 。 

如 图 6.7 所 示 ， 从 第 08 一 10 行 代码 的 输出 结果 来 看 ， 与 我 们 初始 化 定义 的 属性 值 是 一 致 的 。 

从 第 11 行 代码 输出 的 结果 来 看 ， 直 接 输出 对 象 obj 的 效果 是 一 个 以 Object 开头 的 JSON 数据 
格式 ， 内 部 包含 全 部 属性 名 称 及 其 对 应 的 属性 值 。 

从 第 13、 第 15 和 第 17 行 代码 输出 的 结果 来 看 ， 每 次 经 过 delete 运算 后 ， 对象 obj 的 属性 均 被 
成 功 删 除 ， 直 至 最 后 输出 了 一 个 空 的 Object 对 象 。 
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Developer Tools - ECMAScript in 15-days - http://localhost:63342/Webst 


[a Inspecto Console Debugge Style Edito Performanc Memon Networl storage 器 - 园 日 字 日 上 口 


从 时 Filteroutput (| PersistLogs 
delete obj : "es5-Operator-new-delete.html:24:3 
userid : M10 "eS5-oOperator-new-delete.html:29:3 
username : Leo Messi "es5-oOperator-new-delete.html :30:3 
gentie : male "eS5S-Operator-new-delete.html :3]1:3 
* Object { userid: "M10", username: "Leo Messi", "Ee5-O0perator-new-delete.html :32:3 


gentie: "male” } 
by Object { userid: "M10", ysername: "Leo Messi" } .es-operator-new-delete.html:34:3 


* Object { userid: "M10" } "es5-Operator-new-delete.html :36:3 
* Object { } "es5-Operator-new-delete.html :38:3 
delete obj2 : es-Operator-new-delete.html :41:3 
* Object { userid: "M10", username: "Leo Messi", -~e5-0Operator-new-delete.html:46:3 
gentile: "male” } 

* Object { userid: "M10", username: "Leo Messi", “~e5-O0perator-new-delete.html:48:3 
gentile: "male” } 

null "~e5-0perator-new-delete.html:50:3 


从 。 sn soseasnseaeassaeaeaseaeaeeaeaenseaeaenseseaseaeaeaseaeaseaeasaseaeaseseaeassaeaeaseapeaeeaeasaseaeaeaaeseaseaeaeaspsaeaseaeaeaseaeaeeaeaeaseaeaeaseapeaeeapapeasapaseaeaeaeeaeaeaspaeaseseaeaseaeaseseaeaseaeaeaseaeaeeapaeaseapapaheaeaeeaeaeaseseaseaeaeaseaeapeaeapaseaeapaheseaeeaeaeaseaeapaaeseaseaeaeaaseseaseaeass 


6.7 ECMAScript 一 元 运算 符 (new & delete) 


从 第 25 一 27 行 代码 输出 的 结果 来 看 ， 第 26 行 代码 中 尝试 通过 delete 运算 直接 删除 对 象 obj2 
的 操作 没有 效果 ， 这 是 为 什么 呢 ? 让 我 们 返回 关于 delete 运算 符 定 义 的 描述 : “delete 运算 符 用 于 
删除 对 已 存在 对 象 的 属性 或 方法 的 引用 ”， 这 就 说 明 delete 运算 符 只 对 于 对 象 的 属性 或 方法 有 效 ， 
而 无 法 直接 删除 对 象 本 喘 。 

那么 如 何 删除 对 象 呢 ? 我 们 看 第 18 行 和 第 28 行 代码 中 定义 , 通过 直接 给 对 象 赋值 null, 就 可 
以 清空 对 象 了 ， 从 第 29 行 代码 输出 的 结果 就 可 以 看 出 来 。 

但 是 ， 清 空 对 象 并 不 意味 看 对 象 就 从 内 存 中 被 释放 了 ，ECMAScript 脚本 语言 有 专门 的 垃圾 回 
收 机 制 负 责 内 存 释放 的 操作 。 


6.3.3 void 运 鼻 符 及 表达 式 


ECMAScript 语法 规范 中 定义 void 运算 符 对 任何 值 均 返回 (undefined) 值 ，void 运算 符 的 作用 
是 避免 输出 不 应 该 输出 的 值 。 

例如 ， 在 HTML 页 面 的 <a> 标 签 内 调用 ECMAScript (JavaScript) 函数 时 ， 若 打算 正确 实现 该 
功能 ， 则 函数 一 定 不 能 返回 有 效 值 ， 否则 浏览 器 页 面 就 会 被 清空 , 仅仅 会 瞧 代 显示 出 函数 的 返回 结 
朱 。 

下 面 先 看 一 个 未 应 用 void 运算 符 的 代码 示例 〈 详 见 源 代码 ch06 目录 中 的 ch06-es-operator- 
void.html 文件 ) 。 

【代码 6-8】 


Qn < p> 

02 无 void 操作 符 测试 :<br> 

03 <a href="javascript:window.open('about:blank')"> 无 void 操作 符 </a><br> 
04 </p> 


关于 【代码 6-8】 的 分 析 如 下 : 
这 段 代 人 码 的 主要 日 的 就 是 调用 window.open() 方 法 打开 一 个 空 的 页 面 ， 但 因为 window.open() 
方法 会 有 一 个 返回 值 〈 即 对 新 打开 窗口 的 引用 ) ， 所 以 该 页 面 会 显示 该 返回 值 。 


Le 
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运行 页 面 ， 调 试 信 息 如 图 6.8 所 示 。 单 击 页 面 中 箭头 所 指 的 “无 void 操作 行 ” 超 链接 ， 页 面 
效果 如 图 6.9 所 示 。 因 为 window.open() 方 法 会 有 一 个 返回 值 , 即 对 新 打开 窗口 的 引用 (一 个 window 
对 象 ) ， 所 以 原 页 面 中 的 内 容 已 被 该 window 对 象 的 引用 值 [object Window] 强 行 蔡 换 掉 了 了 。 


ECMAScript in 15-days - Mozill: 







Mozilla FireFox 





ECMAScript in 15-days 


javascript:window.open! 
GC © localhost »》 三 


= < GC © javascript:window.o 
[object Window] 
ECMAScript - 运算 符 与 表达 式 - void 新 打开 的 “ 空 " 页 面 
无 void 操 作 符 测试 : 页 面 返 回 的 [window] 对 人 象 
无 void 操 作 符 
回 x 中 x 
6.8 ” ECMAScript 一 元 运算 符 (无 void) (1) 6.9 ” ECMAScript 一 元 运算 符 (无 void) (2) 


那么 如 何 避 免 该 问题 的 出 现 呢 ? 这 个 时 候 void 运算 符 就 可 以 发 挥 作 用 了 。 
下 面 继 续 看 一 个 应 用 void 运算 符 的 代码 示例 〈 详 见 源 代码 ch06 目录 中 的 
ch06-es-operator-void.html 文件 ) 。 
【代码 6-9】 
01 <p> 
02 “有 void 操作 符 测试 :<br> 


03 <a href="javascript:void(window.open('about:blank'))"> 有 void 操 作 符 </a><br> 
04 </p> 


关于 【代码 6-9】 的 分 析 如 下 : 

这 段 代码 的 主要 目的 同样 是 调用 window.open() 方 法 打开 一 个 空 的 页 面 , 但 与 【代码 6-8】 的 处 
理 方式 不 同 的 是 ， 在 window.open() 方 法 外 面 通过 void 运算 符 将 其 包裹 在 其 中 了 ， 所 以 就 将 返回 值 
强制 转换 为 undefined 值 了 。 

运行 HTML 页 和 面 ， 并 使 用 浏览 器 控制 台 查 看 调试 信息 ， 页 面 初始 效果 如 图 6.10 所 示 。 单 击 页 
面 中 第 头 所 指 的 “有 void 操作 符 ” 超 链接 ， 页 面 效 果 如 图 6.11 所 示 。 虽 然 window.open() 方 法 会 有 
一 个 返回 值 ， 但 是 被 void 运算 符 强制 转换 为 undefined 值 ， 而 undefined 值 是 无 意义 的 ， 因 此 就 会 
保留 原始 的 内 容 。 


ECMAScript in 15-days - Mozilla Fire 









ECMAScript in 15-days - Mozilla Firefox 
ECMAScriptin 15-days Xx 


加 ECMAScriptin15-days Xx hs 


GQ © localhost = @ | @) localhost.63342 


q 
bt 
Y 
川 


ECMAScript - 运算 符 与 表达 式 - void ECMAScript - 运算 符 与 


有 void 操作 符 测试 : 有 void 操 作 符 测试 
有 void 操作 符 有 void 操作 符 新 打开 的 “ 空 "页 面 
x X 
图 6.10 ECMAScript 一 元 运算 符 (有 void) (1) 图 6.11 ECMAScript 一 元 运算 符 (有 void) (2) 
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6.3.4 ”前 增 量 与 前 减 量 运算 从 及 表达 式 


对 于 前 增 量 与 前 减 量 运算 符 ,相信 和 学习 过 C 语 言 或 Java 语 言 的 读者 也 一 定 很 熟悉 ,ECMAScript 
语法 规 邯 中 同样 定义 了 前 增 量 与 前 减 量 这 两 个 运算 符 ， 使 用 方法 与 C 语言 和 Java 语言 是 一 致 的 。 

所 谓 前 增 量 运算 符 ， 就 是 在 变量 前 放 两 个 加 号 〈 十 十 ) ， 功 能 是 在 数值 上 加 1; 同 理 ， 前 减 量 
运算 从 就 是 在 变量 前 放 两 个 减 号 (一 一 ) ， 功 能 是 在 数值 上 减 1。 注 意 ， 两 个 加 号 (十 十 ) 或 两 个 
减 号 (一 一 ) 放 在 变量 前 与 放 在 变量 后 ， 在 功能 上 是 有 区 别 的 ， 后 面 我 们 会 详细 介绍 。 

下 面 看 一 个 应 用 前 增 量 与 前 减 量 运算 符 的 代码 示例 〈 详 见 源 代 码 ch06 目录 中 的 ch06-es- 
operator-pre-ppmm.html 文件 ) 。 

【代码 6-10】 


01 <script type="text/javascript"> 


02 var i = ls 

03 console.log("i = " + i); 

04 二 +， 

05 conaolee log (Stiti T= I) 
06 console.log ("++i = " + ++i); 
07 console. log ("i ="™ 1) 

08 var j] = 3; 

09 console .log(rj] = "+ 3); 

10 三 一 了 

3 console .log("--]j，]j= " + j); 
1 console .log("--]j = "+ --j); 
le eonsole loq( y= Ti 


Tid /sceipe> 


关于 【代码 6-10】 的 分 析 如 下 : 
第 02 行 代码 定义 了 第 一 个 变量 1， 并 初始 化 为 数值 1。 


第 06 行 代码 在 浏览 器 控制 台中 输出 了 表达 式 〈 十 +i) 的 数值 ， 这 里 是 对 变量 i 使 用 前 增 量 运 
算 符 后 的 结果 。 

第 08 行 代 码 定义 了 第 二 个 变量 j， 并 初始 化 为 数值 3。 

第 10 行 代 码 使 用 前 减 量 运算 符 对 变量 j 进行 了 操作 〈 一 一 j) 。 

第 12 行 代 码 在 浏览 器 控制 台中 输出 了 表达 式 〈( 一 一 j) 的 数值 ， 这 里 是 对 变量 j 使 用 前 减 量 运 
算 符 后 的 结果 。 

第 13 行 代 码 再 次 在 浏览 器 控制 台中 输出 了 变量 j 的 数值 。 

运行 页 面 ， 调 试 信息 如 图 6.12 所 示 。 

如 图 6.12 所 示 ， 在 第 04 行 代码 对 变量 i 使 用 前 增 量 运算 符 操 作 (十 十 i) 后 ， 第 05 行 代码 输 
出 的 变量 i 的 值 为 2， 说 明 前 增 量 运算 符 对 变量 i 的 操作 成 功 了 。 

从 第 06 行 代码 输出 的 数值 结果 3 来 看 ， 说 明 直 接 输出 表达 式 〈 十 +i) 的 数值 为 3。 

从 第 07 行 代码 输出 的 数值 结果 3 来 看 ， 经 过 第 06 行 代码 中 前 增 量 运算 符 对 变量 i 的 操作 后 ， 
变量 i 的 数值 也 变 为 3。 
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Developer Tools - ECMAScript in 15-days - http://localhost:é 
a Inspec! Consc Debug' Style Ed Performas Memc Netwc Stora 轩 ~" 园 日 窗 日 可 





苗 时 Filteroutput _| Persist Logs 
i= 1 “Operator-pre-ppamm.html :24:3 
++1, 1 一 2 -Operator-pre-ppmm.htmt:26:3 
++1 = 了 ~O0perator-pre-ppmm.html :27:3 
i=3 ~Operator-pre-ppmm.html :28:3 
j= 3 "Operator-pre-ppmm,.html :; 30:3 

| -=-j, j=2 “Operator-pre-ppmm.html: 32:3 
--j = 1 “Operator-pre-ppmm.html :33:3 
j= 1 “Operator-pre-ppamm.html :34:3 

| > | 


SO 


图 6.12 ”ECMAScript 一 元 运算 符 ( 前 增 量 与 前 减 量 ) 


类 似 地 ， 在 第 10 行 代码 对 变量 j 使 用 前 减 量 运算 符 操 作 (一 一 j) 后 ， 第 11 行 代码 输出 的 变量 

j 的 值 为 2， 说 明 前 减 量 运 算 答对 变量 j 的 操作 成 功 了 。 

从 第 12 行 代码 输出 的 数值 结果 1 来 看 ， 说 明 直 接 输 出 表达 式 〈 一 一 j) 的 数值 为 1。 

从 第 13 行 代码 输出 的 数值 结果 1 来 看 ， 经 过 第 12 行 代码 中 前 减 量 运 算 符 对 变量 j 的 操作 后 ， 
变量 j 的 数值 也 变 为 1。 

以 上 就 是 对 前 增 量 与 前 减 量 运算 符 的 测试 过 程 ， 下 面 介 绍 对 这 两 个 运算 符 对 应 的 后 增 量 与 后 





6.3.5 “后 增 量 与 后 减 量 运算 符 及 表达 式 


对 于 后 增 量 与 后 减 量 运算 符 ， 可 以 理解 为 是 相对 于 前 增 量 与 前 减 量 运算 符 而 言 的 。 所 谓 后 增 
量 运算 符 ， 就 是 在 变量 后 放 两 个 加 号 (十 十 )， 功 能 是 在 数值 上 加 1; 同 理 ， 后 减 量 运算 符 就 是 在 
变量 后 放 两 个 减 号 (一 一 ) ， 功 能 是 在 数值 上 减 1。 如 前 面 所 述 ， 两 个 加 号 (十 十 ) 或 两 个 减 号 (一 
一 ) 放 在 变量 后 与 放 在 变量 前 ， 在 功能 上 是 有 区 别 的 。 下 面 我 们 就 通过 具体 代码 实例 来 详细 分 析 。 

下 面 是 一 个 应 用 后 增 量 与 后 减 量 运算 符 的 代码 示例 〈 详 见 源 代码 ch06 目录 中 的 ch06-es- 
operator-suf-ppmm.html 文件 ) ， 该 代码 示例 是 在 【代码 6-10】 的 基础 上 修改 而 成 的 。 

【代码 6-11 】 


01 <script type="text/javascript"> 











02 Var = 1» 

03 console.log("i = " + i); 

04 i++? 

05 consoles LOGIC T= 1) 
06 console .log("i++ = " + i++) ， 
07 console. log ("TT ET 71): 

08 Var ] = 3; 

09 Console .log("j = "+ Jj); 

10 了 = 一: 

ll Console ogg (Fi—— 1 = 7 TS) 
hs console .log("j-- = " + j--); 
13 console.log("j = " + j); 


i149 /Seript> 


关于 【代码 6-11】 的 分 析 如 下 : 
第 02 行 代码 定义 了 第 一 个 变量 1， 并 初始 化 为 数值 1。 
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第 04 行 代 码 使 用 后 增 量 运 算 符 对 变量 i 进行 了 操作 〈i 十 十 ) 。 

第 06 行 代码 在 浏览 器 控制 台中 输出 了 表达 式 〈i 十 十 ) 的 数值 ， 这 里 是 对 变量 i 使 用 后 增 量 运 
算 符 后 的 结果 。 

第 08 行 代码 定义 了 第 二 个 变量 j， 并 初始 化 为 数值 3。 

第 10 行 代 码 使 用 后 减 量 运算 符 对 变量 j 进行 了 操作 (j 一 一 ) 。 

第 12 行 代码 在 浏览 器 控制 台中 输出 了 表达 式 (j 一 一 ) 的 数值 ， 这 里 是 对 变量 j 使 用 后 减 量 运 
算 符 后 的 结果 。 

第 13 行 代码 再 次 在 浏览 器 控制 台中 输出 了 变量 j 的 数值 。 

运行 页 面 ， 调 试 信 息 如 图 6.13 所 示 。 





Developer Tools - ECMAScript in 15-days - http://localhost:é 
[Ca Inspec! Consc Debug' Style Ed Performz Memc Netwr Storal 轩 ~" 轩 上 目 内 日 可 


闪 时 Filter output |_ | Persist Logs 
i= 1 "Operator-suyuf-ppmm.html :24:3 
i++，1i = 2 -<DOperator-suf-ppmm.html:26:3 
i++ = 2 "Operator-suf-ppmm.html :27:3 
i= 3 "0perator-suf-ppmm.html :28:;3 
j= 3 “Operator-suyf-ppmm.html :30:3 
js -2 "Operator-suf-ppmm.html :32:3 
j--=2 “Operator-syuf-ppmm.html :33:3 
yy | "Operator-suf-ppmm.html:34:3 

1 >| 


.enonemeenennenasnennenaenennen nannennnnn anenrnannennnnnnnnn nr 


6.13 ” ”ECMAScript 一 元 运算 符 ( 后 增 量 与 后 减 量 ) 


如 图 6.13 所 示 ， 在 第 04 行 代码 对 变量 i 使 用 后 增 量 运 算 符 操作 (i 十 十) 后， 第 05 行 代 码 输 
出 的 变量 i 的 值 为 2， 说 明 后 增 量 运算 符 对 变量 i 的 操作 成 功 了 。 

从 第 06 行 代码 输出 的 数值 结果 2 来 看 ， 说 明 直 接 输出 表达 式 (i 二 十》 的 数值 仍 为 2， 这 就 与 
前 增 量 运算 符 有 区 别 了 。 

从 第 07 行 代码 输出 的 数值 结果 3 来 看 ， 经 过 第 06 行 代码 中 后 增 量 运算 符 对 变量 i 的 操作 后 ， 
变量 i 的 数值 确实 是 变 为 3 了 。 

类 似 的 ， 在 第 10 行 代 码 对 变量 j 使 用 后 减 量 运算 符 操 作 (j 一 一 ) 后 ， 第 11 行 代码 输出 的 变量 
j 的 值 为 2， 说 明 后 减 量 运算 符 对 变量 j 的 操作 成 功 了 。 

从 第 12 行 代码 输出 的 数值 结果 2 来 看 ， 说 明 直 接 输 出 表达 式 (j 一 一 ) 的 数值 仍 为 2， 这 就 与 
前 减 量 运 算 符 有 区 别 了 。 

从 第 13 行 代码 输出 的 数值 结果 1 来 看 ， 经 过 第 12 行 代码 中 后 减 量 运算 符 对 变量 j 的 操作 后 ， 
变量 j 的 数值 确实 是 变 为 1 了 。 

以 上 就 是 对 后 增 量 与 后 减 量 运 算 符 的 测试 过 程 , 读者 可 以 仔细 对 比 【 代 码 6-10】 与 【代码 6-11】 
中 运算 符 使 用 的 特点 。 

















6.3.6 ”一 元 加 法 与 一 元 减法 运算 符 及 表达 式 

ECMAScript 语法 规范 中 定义 的 一 元 加 法 与 一 元 减法 运算 符 ， 与 我 们 在 数学 中 学 习 到 的 定义 基 
本 一 致 ， 但 在 功能 用 法 上 又 有 所 增强 。 

所 谓 一 元 加 法 运算 符 ， 就 是 在 变量 前 放 一 个 加 号 +) ， 其 对 数值 基本 是 无 意义 的 因为 对 数 
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值 使 用 一 元 加 法 运算 符 后 ， 数 值 仍 是 其 本 身 ) ， 但 其 可 以 将 字符 串 转 换 为 数值 ， 还 可 以 将 十 六 进 制 
数 转 换 为 十 进 制 数 。 同 理 ， 一 元 减法 运算 符 就 是 在 变量 前 放 一 个 减 号 (-) ， 其 可 对 数值 求 相 反 数 ， 
同时 对 字符 串 和 十 六 进 制 数 也 起 作用 。 

下 面 看 一 个 应 用 一 元 加 法 与 一 元 减法 运算 符 的 代码 示例 〈 详 见 源 代 人 码 ch06 目录 中 的 ch06-es- 
operator-uni-add-minus.html 文件 ) 。 

【代码 6-12 】 


01 <script type="text/javascript"> 


02 var i = 123. 

Ei console Log(™ T= 1 Fs 

04 console.log("-i = " + -i); 

05 var j = -123; 

06 eonsole, Ioqg (Sty = "mT EI) 

07 console,10g("-j = " + -3): 

08 var Stel = "T1233"> 

09 console.log("typeof strl1 = " + typeof str]l); 
10 console Ion SEE 人世 Rs 

a console.log("typeof +Strl = " + typeof +Str1) ; 
过 Var Str2 一 23 

13 console.log("-str2 = " + -str2); 

14 Var ixl16 = Oxff; 

15 console log(T Tixio = Tt Tixlo): 

16 console.,l1og ("+ix16 = ™ + =1ix]16): 


Tp 


关于 【代码 6-12】 的 分 析 如 下 : 

第 02 行 代码 定义 了 第 一 个 变量 1， 并 初始 化 为 正 数值 123。 

第 03 行 代码 使 用 一 元 加 法 运算 符 对 变量 i 进行 了 操作 (+i) 。 

第 04 行 代码 使 用 一 元 减法 运算 从 对 变量 i 进行 了 操作 (-i) 。 

第 05 行 代码 定义 了 第 二 个 变量 j， 并 初始 化 为 负数 值 -123。 

第 06 行 代码 使 用 一 元 加 法 运算 符 对 变量 j 进行 了 操作 〈+j) 。 

第 07 行 代码 使 用 一 元 减法 运算 符 对 变量 j 进行 了 操作 〈-j) 。 

第 08 行 代码 定义 了 第 三 个 变量 str1， 并 初始 化 为 正 数 形 式 的 字符 串 "123"。 

第 09 行 代码 使 用 typeof 运算 符 对 变量 strl 进行 了 操作 (typeof strl) 。 

第 10 行 代码 使 用 一 元 加 法 运算 符 对 变量 strl 进行 了 操作 (+str1) 。 

第 11 行 代码 在 第 10 行 代码 的 基础 上 ， 使 用 typeof 运算 符 和 一 元 加 法 运算 符 对 变量 strl 进行 
了 操作 (typeof +str1)。 

第 12 行 代码 定义 了 第 四 个 变量 sttr2， 并 初始 化 为 负数 形式 的 字符 串 "-123"。 

第 13 行 代码 使 用 一 元 减法 运算 从 对 变量 str2 进行 了 操作 (-str2) 。 

第 14 行 代码 定义 了 第 五 个 变量 ix16， 并 初始 化 为 十 六 进 制 形式 的 字符 串 0xff。 

第 15 行 代码 使 用 一 元 加 法 运算 符 对 变量 ix16 进行 了 操作 (+ix16) 。 

第 16 行 代码 使 用 一 元 减法 运算 符 对 变量 ix16 进行 了 操作 (-ix16) 。 

运行 页 面 ， 调 试 信息 如 图 6.14 所 示 。 

如 图 6.14 所 示 ， 从 第 03 行 代码 输出 的 数值 结果 123 来 看 ， 说 明 一 元 加 法 运算 符 对 正 数值 是 没 
有 意义 的 。 那 么 一 元 加 法 运算 符 对 负数 值 呢 ? 从 第 06 行 代 码 输出 的 结果 -123 来 看 ， 一 元 加 法 运算 
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符 对 负数 值 同样 没有 意义 ， 这 就 说 明 一 元 加 法 运算 对 数值 都 没有 意义 。 





Developer Tools - ECMAScript in 15-days - http://lo 
Ca Inspe Cons Debu' StyleE Perforr Mem Netv Stor: 加 * 园 日 次 日 口 


商 字 Filter output |_| Persist Logs 
+1i = 123 -Uni-add-minus .htmt:24:3 
-i = -123 “~UNi-add-minus.html :25:3 
+j = -123 “UnNni-add-minus.html:27:3 
-j = 123 -Uni-add-minus .html :28:3 
typeof strl = string “UnNi-add-minus.html ;30:3 
| +strl = 123 _uni-add-minus .htmt:31:3 
typeof +strl = number uni-add-minus .html :32:3 
-Str2 = 123 -Uni-add-minus .htmt:34:3 
+ix16 = 255 "~UnNni-add-minus.html :36:3 


6.14 ” ECMAScript 一 元 运算 符 ( 一 元 加 法 与 一 元 减法 ) 

从 第 04 行 代码 输出 的 数值 结果 -123 来 看 ,说明 一 元 减法 运算 符 起 到 了 求 负 的 作用 , 将 正 数 123 
转换 为 了 负数 -123。 从 第 07 行 代码 输出 的 数值 结果 123 来 看 ， 说 明 一 元 减法 运算 符 同样 起 到 了 求 
负 的 作用 ， 将 负数 -123 转换 为 了 正 数 123。 

从 第 09 行 代 码 输 出 的 结果 string 来 看 ， 第 08 行 代 码 定义 的 变量 strl 是 一 个 字符 串 变 量 。 

从 第 10 行 代 码 输 出 的 结果 123 来 看 ， 对 变量 strl 使 用 一 元 加 法 运算 符 后 ， 将 字符 串 类 型 转换 
为 了 数值 类 型 ， 这 从 第 11 行 代码 输出 的 结果 number 可 以 得 到 确认 。 

从 第 13 行 代码 输出 的 结果 123 来 看 ， 对 字符 串 变 量 str2 使 用 一 元 减法 运算 符 后 ， 不 但 可 以 将 
字符 串 类 型 转换 为 数值 类 型 ， 而 且 还 能 对 数值 求 负 。 

从 第 15 和 第 16 行 代码 输出 的 结果 255 和 -255 来 看 ， 一 元 加 法 和 一 元 减法 运算 符 还 可 以 将 十 
六 进 制 数 转 换 成 十 进 制 数 ， 同 时 一 元 减法 运算 符 仍 有 求 负 功能 。 


6.4 ECMAScript 关系 运算 符 及 表达 式 


在 ECMAScript 语法 规范 中 对 两 个 数值 执行 比较 运算 的 运算 符 ， 统 称 为 关系 运算 符 。 关 系 运算 
符 一 般 包 括 小 于 、 大 于 、 小 于 等 于 和 大 于 等 于 4 种 。 关 系 运算 符 表 达 式 均 会 返回 一 个 布尔 值 。 


6.4.1 ”关系 运算 符 与 表达 式 概 述 


ECMAScript 语法 规范 中 定义 的 关系 运算 香 与 表达 式 详 见 表 6.4。 
表 6.4 ECMAScript 关系 运算 符 与 表达 式 


运算 符 | 描述 ”| 示例。 ”| 结果 | 前 提 条 件 
> KF jz le lx | 


盖 |xH4F lz mo lxo | 
| | [we |x0 | 
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6.4.2 ”数值 关系 运算 符 表 达 式 


在 ECMAScript 语法 规范 中 , 关系 运算 符 主 要 应 用 于 数值 的 比较 运算 。 对 于 每 一 个 数值 关系 运 
算 符 表达 式 均 会 返回 一 个 布尔 值 ， 通 过 判断 该 布尔 值 来 判断 数值 比较 的 结果 。 

下 面 看 一 个 数值 关系 运算 符 表 达 式 的 代码 示例 〈 详 见 源 代 人 码 ch06 目录 中 的 ch06-es-operator- 
relation-number.html 文件 ) 。 


【代码 6-13 】 

01 <script type="text/javascript"> 

02 var DREL = 2 > |]: 

03 console 1G69( 2.> 1 = bRII)S 
04 Var DR2 = 2 1 

0 console. 109 (2 < "bh 2): 
06 var bR 3= 2 >= 1; 

07 console.log("2 >=1= "+ bR 3); 
08 Var bR 4 = 2 <= 1; 

09 console .log("2 <= 1= "十 bR 4); 


I et sd ole 


关于 【代码 6-13】 的 分 析 如 下 : 

这 段 代码 主要 就 是 对 数值 1 和 2 分 别 使 用 大 于 (>) 、 小 于 〈<) 、 大 于 等 于 (>=) 和 小 于 等 
于 (<=) 这 4 种 关系 运算 符 进行 了 比较 运算 。 

运行 页 面 ， 调试 信息 如 图 6.15 所 示 。 数 值 关 系 运算 符 表 达 式 输出 的 结果 完全 符合 我 们 的 预期 。 
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[a Inspec Cons Debuc Style Ec Perform Memc Netw Stora 团 " 园 日 窗口 可 


会 字 Filter output (| Persist Logs 
2>1 = true -relation-number.html:24:3 
2<1 = false “relation-number.html:26:3 

| 2 >= 1 = true "elation-number,html:28:;3 
2 .<= 1 = false “relation-number.html :30:3 
| 


eaemsasmennnsennsanssensennsnnnisnnienennnssnnmnenminntnnnmnenanmmnmmnmmamnmmenmmmmmmnmnammmennmmmmmanmnmmmmennmd 


6.15 ” ECMAScript 关系 运算 符 ( 数 值 比 较 ) 


6.4.3 ”字符 串 关 系 运 算 符 表达 式 


在 ECMAScript 语法 规范 中 , 关系 运算 符 还 可 以 应 用 于 字符 串 的 比较 运算 , 这 也 是 计算 机 编程 
语言 的 一 大 特点 。 对 于 字符 串 也 可 以 进行 比较 运算 ， 似乎 超出 了 我 们 知识 范畴 。 不 过 对 于 学 习 过 C 
语言 或 Java 语言 的 读者 来 说 ， 字 符 串 比较 运算 并 不 陌生 ， 这 是 因为 在 计算 机 编程 语言 中 ， 关 系 运 
算 符 比较 的 是 字符 在 计算 机 中 的 编码 (ASCII 编码 ) 。 

下 面 看 一 个 字符 串 关 系 运 算 符 表达 式 的 代码 示例 〈 详 见 源 代码 ch06 目录 中 的 ch06-es- 


operator-relation-string.html 文件 ) 。 


【代码 6-14】 
01 <script type="text/javascript"> 
02 var DR str 1 = “A > "BB"; 
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HS| consolerlog( A > B= DR SEE 

04 var DR Stre2 = Par Dn 

US eonsolee loglTa < b= DR stri2)s 

06 var DRISLred = AY > on 

07 console.log("A>a=" +bR str 3); 

08 Var bR str 4 = "apple" < "banana"; 

09 console.1log("apple < banana 一" 十 DR str 4); 
10 voareboReste = apple > Bananaey 

Tl console.log("apple < Banana = " + bR str 5); 


3 ee oh Sal oh ep 

关于 【代码 6-14】 的 分 析 如 下 : 

这 段 代 人 码 主 要 就 是 对 字符 串 分 别 使 用 大 于 (>) 和 小 于 (<) 关系 运算 符 进 行 了 比较 运算 。 
运行 页 面 ， 调 试 信息 如 图 6.16 所 示 。 


Developer Tools - ECMAScript in 15-days - http://localho 
CR Inspec Cons Debug Style Ec Perform Mem( Netw Stora 轩 " 园 日 窜 口 可 





茄 富 Filter output (| Persist Logs 
A>B = false “Telation-string.html :24:3 
| a<b = true “elation-string.html:26:3 
A>a = false “relation-string.html:28:3 
apple < banana = true -elation-string.html :30:;3 
apple < Banana = false “relation-string.html :32:3 

>| 


6.16 ECMAScript 关系 运算 符 〈( 字 符 串 比较 ) 


如 图 6.16 所 示 , 在 尝试 对 大 写字 母 A 和 B 进行 了 比较 运算 "A" > "B" 后 , 关系 运算 符 表达 式 "A" 
> "B" 的 返回 值 为 false， 说 明 大 写字 母 A 小 于 大 写字 母 B (比较 ASCII 编码 ) 。 

在 尝试 对 小 写字 母 a 和 b 进行 了 比较 运算 "a" < "b" 后 ， 关 系 运 算 符 表达 式 "a" < "b" 的 返回 值 为 
true， 说 明 小 写字 母 a 小 于 小 写字 母 b (比较 ASCII 编码 ) 。 

在 尝试 对 大 写字 母 A 和 小 写字 母 a 进 行 了 比较 运算 "A" > "a" 后 ， 关 系 运算 符 表 达 式 "A" > "a" 
的 返回 值 为 false， 说 明 大 写字 母 A 小 于 小 写字 母 a( 比 较 ASCII 编码 ) ， 而 不 是 大 写字 母 A 等 于 
小 写字 母 a。 

在 尝试 对 小 写 单 词 apple 和 小 写 单 词 banana 进行 了 比较 运算 "apple" < "banana" 后 , 关系 运算 符 
表达 式 "apple" < "banana" 的 返回 值 为 tue， 说 明 小 写 单词 apple 的 首 字母 a 小 于 小 写 单词 banana 的 
首 字母 b (比较 ASCII 编码 ) 。 

在 尝试 对 小 写 单词 apple 和 大 写 单词 Banana 进行 了 比较 运算 "apple" < "Banana" 后 ， 关 系 运算 
符 表 达 式 "apple" < "Banana" 的 返回 值 为 false, 说 明 小 写 单词 apple 的 首 字 母 a 大 于 大 写 单词 Banana 
的 首 字母 B (比较 ASCII 编码 ) 。 


6.4.4 ”数值 与 字 从 串 关系 运算 从 表达 式 


在 ECMAScript 语法 规范 中 ,既然 关系 运算 符 可 以 应 用 于 字符 串 的 比较 运算 ,那么 对 于 数值 和 
字符 串 的 比较 运算 也 是 文 持 的 。 

下 面 看 一 个 字符 串 关 系 运算 符 表 达 式 的 代码 示例 ( 详 见 源 代 码 ch06 目录 中 的 ch06-es-operator- 
relation-num-str.html 文件 ) 。 
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【代码 6-15 】 

01 <script type="text/javascript"> 

02 Tar nmseenlie Vl > 2 

03 consoleslog( 1 > 2 = DR num ste ls 
04 var DR num Str 2 = VI > 2 

05 console.log("'11l" >2= "+bR num str 2); 
06 var DRINnUm Str 3 = "a > 27 

07 consoles log( ”a> 2 m7 bR num st a 

08 Var bR num str 4 = "a" <= 2; 

he, console.log("'a' <= 2= "+ DbR num str 4); 


SC 六 


关于 【代码 6-15】 的 分 析 如 下 : 

这 段 代 码 主要 就 是 对 数值 和 字符 串 分 别 使 用 大 于 (>) 和 小 于 等 于 (<=) 关系 运算 符 进行 了 比 
较 运 算 。 

运行 页 面 ， 调 试 信息 如 图 6.17 所 示 。 





Developer Tools - ECMAScript in 15-days - http://localhosi! 


[a Inspec Cons' Debug Style Ed Perform: Memc Netw' Stora 团 " 轩 上 日 容 口 了 0 


会 时 Filter output | Persist Logs 
| 1]1' > '2' = false “relation-num-str.html ;24;3 
"3" 3 2 = trwe “relation-num-str.html :26:3 
‘a" >2 = false “relation-num-str.html :28:3 
'a' <= 2 = false “relation-num-str.html :30:3 

| 六 | 


ee 


6.17 ECMAScript 关系 运算 符 〈 数 值 与 字符 串 比 较 ) 


如 图 6.17 所 示 ， 在 尝试 对 数值 型 字符 串 11 和 字符 串 2 进行 了 比较 运算 "11" > "2" 后 ， 关 系 运 
算 符 表 达 式 "11" > "2" 的 返回 值 为 false， 说 明 字 符 串 11 的 首 字 符 1 是 小 于 字符 串 2 的 〈 比 较 ASCII 
编码 ) 。 

在 尝试 对 数值 型 字符 串 “11” 和 数值 2 进行 了 比较 运算 "11" > 2 后 , 关系 运算 符 表 达 式 "11" > 2 
的 返回 值 为 tue， 这 是 因为 ECMAScript 语法 规范 中 定义 了 当 字 符 串 与 数值 进行 关系 运算 时 ， 字 符 
串 会 先 转换 为 数值 ， 再 与 数值 进行 比较 运算 。 

在 尝试 对 数值 型 字符 串 a 和 数值 2 进行 了 比较 运算 "a" > 2 后 ， 关 系 运 算 符 表达 式 "a" > 2 的 返 
回 值 为 false， 这 是 因为 字符 串 a 转换 为 数值 后 返回 值 是 NaN。 

在 尝试 对 数值 型 字符 串 a 和 数值 2 进行 了 比较 运算 "a" <= 2 后 ， 关 系 运算 符 表 达 式 "a" <= 2 的 
返回 值 为 false， 这 同样 是 因为 字符 串 a 转换 为 数值 后 返回 值 是 NaN。 

对 于 原始 值 NaN 与 数值 进行 关系 运算 后 ， 返 回 的 结果 均 是 false， 这 也 正 是 ECMAScript 语法 
规范 中 所 定义 的 。 


6.5 “ECMAScript 等 性 运算 符 及 表达 式 


在 ECMAScript 语法 规范 中 判断 两 个 变量 是 否 相 等 的 运算 符 ， 统称 为 等 性 运算 竺 。 等 性 运算 从 
一 般 包括 等 号 、 不 等 号 、 严 格 相等 和 非 严格 相等 ， 前 两 者 用 于 处 理 原 始 值 ， 后 两 者 用 于 处 理 对 象 。 
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等 性 运算 符 表 达 式 均 会 返回 一 个 布尔 值 。 


6.5.1 等 性 运算 符 与 表达 式 概 述 


ECMAScript 语法 规范 中 定义 的 等 性 运算 符 与 表达 式 详 见 表 6.5。 
表 6.5 “ECMAScript 等 性 运算 符 与 表达 式 


前 提 条 件 
ne 
ase 


6.5.2 ”等 号 与 不 等 号 运算 符 表 达 式 


在 ECMAScript 语法 规范 定义 中 , 等 号 是 由 两 个 等 于 号 (==) 来 表示 的 ， 其 含义 是 当 两 个 运算 
数 相等 时 返回 布尔 值 true, 否则 返回 布尔 值 false; 不 等 号 是 由 感叹 号 (!) 和 等 于 号 (=) 的 组 合 (!=) 
来 表示 的 ， 其 含义 是 当 两 个 运算 数 不 相等 时 返回 布尔 值 tue， 否 则 返回 布尔 值 false。 
为 了 确定 两 个 运算 数 是 否 相 等 ， 运 算 前 均 会 对 这 两 个 运算 数 进行 类 型 转换 。 执 行 类 型 转换 的 
基本 规则 如 下 : 
@ 如 果 一 个 运算 数 是 Boolean 值 ， 在 比较 是 否 相 等 之 前 ,会 将 其 转换 为 相应 数值 ， 具 体 是 false 
转换 成 0、true 转换 为 1。 
@ 如 果 一 个 运算 数 是 字符 串 〈 一 般 指数 值 型 字符 串 ， 如 "123" ) ， 另 一 个 是 数字 ， 在 检查 相等 性 
之 前 ， 会 将 其 转换 为 数值 。 
@ 如 果 一 个 运算 数 是 对 象 ， 另 一 个 是 字符 串 ， 在 检查 相等 性 之 前 ， 会 将 该 对 象 转换 为 字符 串 。 
如 果 一 个 运算 数 是 对 象 ， 另 一 个 是 数值 ， 在 检查 相等 性 之 前 ， 会 将 该 对 象 转 换 为 数值 。 
在 比较 运算 时 ， 等 号 与 不 等 号 运算 符 还 会 遵循 以 下 几 项 规则 : 
原始 值 null 和 undefined 是 相等 的 。 
在 相等 性 运算 时 ， 不 能 把 原始 值 null 和 undefined 转换 为 其 他 值 。 
如 果 某 个 运算 数 是 NaN， 那 么 等 号 将 返回 false， 不 等 号 将 返回 true。 
如 果 两 个 运算 数 都 是 对 象 ， 那 么 比较 的 是 各 自 的 引用 值 。 
如 果 两 个 运算 数 指向 同一 对 象 ， 那 么 等 号 运算 会 返回 true。 
下 面 看 一 个 等 号 与 不 等 号 运算 符 表 达 式 的 代码 示例 ( 详 见 源 代码 ch06 目录 中 的 ch06-es- 
operator-equal.html 文件 ) 。 
【代码 6-16】 
01 <script type="text/javascript"> 


02 var bR11=1 == 2; 
EI consoles Tog (Ti = 20= Tl DORON}; 


false 





= | ES EE 
上 | 不 等 号 x je el 
一 = EU 
= ES ee- 
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04 var bR 1 0= 1 != 2; 

US console. log ("TI= 2 7 FbR LIUO)N > 

06 var bR 2 0 = false == 0; 

07 console.log("false == 0=" + DbR 2 0); 
08 Var bR 2 1 = true == 1; 

WW console.log("true == 1 = "+DbR 2 1); 
10 Var bR 2 2 = true == 2; 

1 console.log("true == 2= "+ DbR 2 2);} 

1 bp var bR 3 = "1" == 1;} 

| consolee log (TT == = DR 

14 Var bR 4 = null == 0; 

15 console.log("null == 0 =" + bR 4); 

16 var bR 5 = undefined == 0; 

Lf console.log ("undefined == 0 =" + bR 5); 
18 var bR 6 = undefined == null; 

1 console.log ("undefined == null = " + bR 6); 
20 Var bR 7 = NaN == 1;} 

之 了 console.log("NaN == 1 = " + bR 7); 

之 这 Var bR 8 = NaN == NaN; 

2 console.log("NaN == NaN = " + bR 8); 

24 var bR 9 = NaN != NaN; 

2 console.log("NaN != NaN = " + bR 9); 

wd Var bR 10 = "NaN" == NaN; 

之 区 console.log("'NaN' == NaN = " + bR 10); 


0 /eipe> 


关于 【代码 6-16】 的 分 析 如 下 : 

这 段 代 人 码 主 要 就 是 对 数值 、 字符 串 、null、undefined 和 NaN 分 别 使 用 等 号 (二) 和 不 等 号 (!=) 
运算 符 进 行 了 比较 运算 ， 有 具体 包括 数值 与 数值 、 数 值 与 字符 串 、null 与 undefined、NaN 与 数值 及 
NaN 与 目 身 等 。 

运行 页 面 ， 调 试 信 息 如 图 6.18 所 示 。 


Developer Tools - ECMAScript in 15-days - http://local 
a Insper Cons Debuc Style E' Perforr Mem Netw Storz 回 - 园 日 半日 口 





曾 是 Filter output Persist Logs 
1 == 2 = false -<Dperator-equal .html :24:3 
1 != 2 = true -~<Dperator-equal .html :26:3 
false == 0 = true ~Operator-equal .html :28:3 
true == 1 = true ~0perator-equal .html ;30:3 
true == 2 = false -<Dperator-equal .html :32:3 
"1 == 1 = true -DOperator-equal .html :34:3 
| null == 0 = false ~Operator-equal .html :36:3 
undefined == 0 = false -<Dperator-equal .html :38:3 
undefined == null = true ~Operator-equal .html :40:3 
NaN == 1 = false -0perator-equal .html :42:3 
NaN == NaN = false “~Operator-equal.html :44:3 
NaN != NaN = true -~0perator-equal .html :46:3 
"NaN” == NaN = false “Operator-equal .html :48:3 

区 


图 6.18 ECMAScript 等 性 运算 符 〈 等 号 与 不 等 号 ) 
如 图 6.18 所 示 ， 从 第 03 行 和 第 05 行 代码 输出 的 结果 来 看 ， 等 号 和 不 等 号 运算 符 可 用 于 判断 
两 个 运算 数 是 否 相等 。 
从 第 07 和 第 09 行 代 码 输 出 的 结果 来 看 ， 在 对 true 和 false 进行 等 性 运算 时 ，true 会 先 转换 为 
数值 1，false 会 先 转换 为 数值 0， 然 后 进行 比较 。 因 此 ， 第 07 和 第 09 行 代码 输出 的 结果 为 true， 
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第 11 行 代 码 输出 的 结果 为 false。 

从 第 13 行 代码 输出 的 结果 来 看 , 在 对 字符 串 和 数值 进行 等 性 运算 时 , 字符 串 会 先 转换 为 数值 ， 
再 与 另 一 个 数值 进行 比较 。 因 此 ， 第 13 行 代 码 输 出 的 结果 为 true。 

从 第 15 和 第 17 行 代码 输出 的 结果 来 看 ，null 和 undefined 与 数值 进行 等 性 运算 时 ， 这 两 个 原 
始 值 是 不 能 转换 为 数值 的 。 从 第 19 行 代 码 输 出 的 结果 来 看 ， 在 对 null 和 undefined 进行 等 性 运算 
时 (null == undefined) ， 返 回 的 结果 为 true， 也 就 是 说 null 和 undefined 的 值 是 相等 的 。 

从 第 21、 第 23、 第 25 和 第 27 行 代 码 输出 的 结果 来 看 ， 原 始 值 NaN 不 但 与 数值 进行 等 性 运算 
时 是 不 相等 的 ， 且 与 自身 进行 等 性 运算 时 (NaN 一 NaN、"NaN" 一 NaN) 也 是 不 相等 的 。 


6.5.3 ”严格 相等 与 非 严格 相等 运算 从 表达 式 


在 ECMAScript 语法 规范 中 , 严格 相等 和 非 严 格 相 等 与 相等 和 不 等 是 同类 的 运算 符 ， 只 不 过 严 
格 相等 和 非 严 格 相等 的 不 同 之 处 在 于 ， 进 行 比 较 运 算 之 前 不 会 对 两 个 运算 数 进行 类 型 转换 。 

ECMAScript 语法 规范 中 定义 严格 相等 使 用 三 个 等 于 号 (= 一 ) 来 表示 ， 其 只 有 在 无 顷 类 型 转 
换 运 算数 就 相等 的 条 件 下 ， 返 回 值 才 会 为 true。 非 严格 相等 使 用 感叹 号 〈!) 和 两 个 等 于 号 (== 
的 组 合 (! 二 =) 来 表示 的 ， 其 只 有 在 无 须 类 型 转换 运算 数 就 不 相等 的 条 件 下 ， 返 回 值 才 会 为 true。 

通过 对 上 一 人 小节 的 学 习 ， 我 们 知道 等 号 与 不 等 号 运算 时 会 对 运算 数 进行 类 型 转换 ， 而 严格 相 
等 与 非 严 格 相 等 运算 前 不 进行 类 型 转换 ， 该 功能 目 然 有 其 存在 的 意义 。 

下 面 看 一 个 严格 相等 与 非 严 格 相 等 运算 符 表 达 式 的 代码 示例 《〈 详 见 源 代 码 ch06 目录 中 的 
ch06-es-operator-total-equal.html 文件 ) 。 

【代码 6-17】 


01 <script type="text/javascript"> 


02 Var iNum = 123; 

03 varviote = m129n; 

04 console.10g("123 == '123' = "+ (iNum == iStr)); 
0 console.1og("123 === '123' = " + (iNum === iStr)); 
06 eonsoles Log ("123 1=° "1123 = NiNam = St 
07 console.10g("123 1== "]23" = "+ (iNum !== 1Str))}): 
08 var bR 1 1 = null == undefined; 

09 console.log("null == undefined = "+ bR 1 1); 

10 var bR 1 2 = null === undefined; 

kal console.log("null] === undefined = " + bR 1 2); 

1 var bR 2 1 = null != undefined; 

13 console.log("null != undefined = " + bR 2 1); 

14 var bR 2 2 = null !== undefined; 

1 console.log("null !== undefined = " + bR 2 2); 

16 var bR NaN 1 = NaN == NaN; 

Le console.log("NaN == NaN = " + bR NaN 1); 

18 Var bR NaN 2 = NaN === NaN; 

Ib console.log("NaN === NaN = " + bR NaN 2); 


2 Te eo) ee 


关于 【代码 6-17】 的 分 析 如 下 : 
这 段 代 码 主 要 就 是 对 数值 、 字 符 串 、null、undefined 和 NaN 分 别 使 用 严格 相等 (===) 和 非 严 
格 相 等 〈(! 一 ) 运算 从 进行 了 比较 运算 。 
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第 02 和 第 03 行 代码 分 别 定义 了 两 个 变量 iNum 和 iSttr， 变 量 iNum 初始 化 为 数值 123， 变 量 
iStr 初始 化 为 数值 型 字符 串 "123"。 

第 04 一 07 行 代 码 分 别 使 用 等 号 (==) 、 不 等 号 (!=) 、 严 格 相等 (= 一 ) 和 非 严 格 相等 〈!==) 
运算 符 对 变量 iNum 和 变量 iStr 进行 了 比较 运算 。 

第 08 一 15 行 代 码 分 别 使 用 等 号 (==) 、 不 等 号 (!=) 、 严 格 相等 = 一 ) 和 非 严格 相等 〈!== 
运算 从 对 原始 值 null 和 undefined 进行 了 比较 运算 。 

第 16 一 19 行 代 码 分 别 使 用 等 号 (==) 和 严格 相等 〈 一 =) 运算 符 对 NaN 进行 了 比较 运算 。 

运行 页 面 ， 调 试 信息 如 图 6.19 所 示 。 





Developer Tools - ECMAScript in 15-days - http://localhost:63342/ 
a Inspect' Consol Debugge Style Edit Performan Memor Networ Storag 轩 " 园 目 容 口 了 可 


商 时 Filter output | Persist Logs 
123 == ']123" = true -Operator-total -equal .html :25:3 
| 123 === '123' = false -9perator-totat-eguat ,htmt:26:3 
123 != ']123' = false “Operator-total -equal .html :27:3 
123 !== '123' = true ~Operator-total -equal ,htmt :28:3 
null == Undefined = true “Operator-total-equal .html :30:3 
null === undefined = false -~Dperator-totat-equalt .html :32:3 
null != undefined = false “Operator-total-equal .html :34:3 
null !== Undefined = true -Operator-total -equal .html :36:3 
NaN == NaN = false “Operator-total -equal .html :38:3 
NaN === NaN = false “Operator-total-equal .html :40:3 

[> | 


6.19 ” ECMAScript 等 性 运算 符 〈 严 格 相等 与 非 严 格 相等 ) 

如 图 6.19 所 示 ， 从 第 04 和 第 05 行 代码 输出 的 结果 来 看 ， 使 用 等 号 和 严格 相等 运算 符 对 123 
和 "123" 的 比较 运算 结果 是 不 同 的 。 原 因 就 是 前 文中 提 到 的 ， 严 格 相等 运算 符 不 会 对 运算 数 进行 类 
型 转换 ， 自 然 数 字 123 和 字符 串 "123" 是 不 相等 的 。 

从 第 06 和 第 07 行 代码 输出 的 结果 来 看 ， 使 用 不 等 号 和 非 严 格 相 等 运算 符 对 123 和 "123" 的 比 
较 运 算 结果 与 使 用 等 号 和 严格 相等 运算 符 的 结果 正好 相反 。 

第 09 行 代码 使 用 等 号 的 输出 的 结果 在 【代码 6-16】 中 已 经 清楚 了 ， 而 与 之 相对 应 的 第 11 行 
代码 使 用 严格 相等 输出 的 结果 正好 与 之 相反 ， 即 表达 式 (null === undefined) 的 返回 值 为 false。 

从 第 13 和 第 15 行 代码 输出 的 结果 来 看 ， 使 用 不 等 号 和 非 严 格 相 等 运算 符 对 null 和 undefined 
的 比较 运算 结果 与 使 用 等 号 和 严格 相等 运算 符 的 结果 正好 相反 。 

最 后 ， 从 第 17 和 第 19 行 代码 输出 的 结果 来 看 ， 对 于 原始 值 NaN 与 其 上 自身， 无 论 是 使 用 等 号 
还 是 严格 相等 进行 比较 运算 的 结果 , 返回 值 均 为 false, 这 一 点 也 是 符合 ECMAScript 语法 中 对 原始 
值 NaN 的 定义 。 


6.6 ECMAScript 位 运算 符 及 表达 式 


在 ECMAScript 语法 规范 中 还 定义 了 位 运算 符 ， 用 于 对 数字 撒 层 〈 即 表示 数字 的 32 位 二 进 制 
数 ) 进行 操作 。 具 体 说 到 学 习 位 运算 符 ， 我 们 一 定 要 先 明 白 二 进 制 编码 的 原理 ， 这 一 点 非常 重要 。 
另外 ， 如 果 读 者 曾 阅读 过 《汇编 语言 程序 设计 》 或 《计算 机 组 成 原理 》 这 两 本 书 ， 学 习 位 运算 符 目 
然 就 不 会 有 什么 难度 。 下 面 对 这 些 位 运算 符 逐 一 进行 介绍 。 
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6.6.1 位 运算 符 与 表达 式 概 述 
位 运算 符 用 于 32 位 二 进 制 数 的 位 操作 ， 且 操作 结果 均 转 换 为 十 进 制 的 数字 。ECMAScript 语 
法 规范 中 定义 的 位 运算 符 与 表达 式 详 见 表 6.6。 


表 6.6 ”ECMAScript 位 运算 符 与 表达 式 


二 进 制 表达 式 “| 二 进 制 结果 ”| 十 进 制 结果 | 前 提 条 件 


5 


4 





6.6.2 ”整数 编码 介绍 


在 计算 机 操作 系统 中 ， 一 般 对 整数 的 编码 有 两 种 形式 ， 即 有 符号 整数 〈 人 允许 用 正 数 和 负数 ) 
和 无 符号 整数 (只 人 允许 用 正 数 ) 。 而 在 ECMAScript 语法 规范 中 , 所 有 整数 默认 都 是 有 符号 的 整数 。 

对 于 有 符号 的 整数 (32 位 二 进 制 编码 ) ， 一 般 使 用 前 31 位 表示 整数 的 数值 ， 用 第 32 位 表示 
整数 的 符号 ， 有 具体 就 是 0 表示 正 数 ，! 表示 负数 。 当 然 , 有 符号 整数 的 数值 范围 就 从 -2147483648 一 
2147483647 之 间 了 ， 如 数字 15 就 可 以 使 用 图 6.20 来 表示 。 


数字 15 


olololololololololololololololololololololololololololol1|1|1|1 
| 
pa / ) 


位 31 填充 位 “0" 
23+22+21+20 


图 6.20 ECMAScript 整数 编码 表示 方法 


如 图 6.20 所 示 ， 前 31 位 中 的 每 一 位 都 表示 数值 2 的 时。 从 第 1 位 〈 位 0) 开始 (表示 2”) ， 
第 2 位 (位 1) 表示 (2)，, 第 3 位 (位 2) 表示 (2) ,第 4 位 (位 3) 表示 (2 ) ， 这 样 一 直 累 
加 就 是 (2 ”+2'+2+23=15) 。 而 从 第 5 位 (位 4) 开始 都 没 用 到 的 位 则 用 0 填充。 最后， 第 32 
位 (位 31) 为 0， 表 示 为 正 数 。 

下 面 看 一 个 应 用 正 整 数 编码 的 代码 示例 《〈 详 见 源 代码 ch06 目录 中 的 ch06-es-operator-encode- 
posi-num.html 文件 ) 。 

【代码 6-18】 

01 <script type="text/javascript"> 

人 02 Var iNum = 15; 


由 区 | GODSOLesIog( TSEODInaEYTS YNUmSEOSEE3mOIUZJ 
de /sereipt> 
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关于 【代码 6-18】 的 分 析 如 下 : 

这 段 代码 主要 就 是 将 数值 15 转换 为 二 进 制 数 ， 并 进行 了 输出 操作 。 

运行 页 面 , 调试 信息 如 图 6.21 所 示 。 从 第 03 行 代 码 输出 的 结果 来 看 , 仅 输出 了 二 进 制 数 1111， 
而 不 是 全 部 32 位 二 进 制 数 ， 这 是 因为 填充 位 “0” 被 省 略 掉 了 。 





Developer Tools - ECMAScript in 15-days - http://localh 


[a Inspec Cons Debuc Style Ec Perform Mem Netw Storz 轩 " 轩 目 肉 日 
商 时 Filteroutput [JPersist Logs 
15 to binary is 1111 ~encode-posi-num.html :24:3 


nan 


图 6.21 ECMAScript 位 运算 符 ( 正 数 编码 ) 


而 对 于 负 整 数 也 是 存储 为 二 进 制 代码 的 ， 不 过 采用 的 形式 是 二 进 制 补 码 形式 。 关 于 二 进 制 补 
码 的 内 容 ， 读 者 可 以 参考 前 面 提 到 的 《汇编 语言 程序 设计 》 或 《计算 机 组 成 原理 》 这 两 本 书 ， 这 里 
就 不 深入 讨论 了 。 

之 所 以 不 对 二 进 制 补 码 进行 详细 介绍 , 是 因为 ECMAScript 语法 规范 中 对 负 整 数 采 用 了 简单 的 
处 理 方式 ， 即 直接 使 用 负 号 〈-) 来 表示 将 负 整 数 转换 为 二 进 制 数 的 形式 。 我 们 还 是 通过 具体 的 代 
码 实 例 来 了 解 一 下 。 

下 面 再 看 一 个 应 用 负 整 数 编码 的 代码 示例 ( 详 见 源 代 码 ch06 目录 中 的 ch06-es-operator-encode- 
nega-num.html 文件 ) 。 


【代码 6-19 】 

01 <script type="text/javascript"> 

02 Var iNum = -15; 

03 econsolee log ("~—19 to binary 19 "HF iNum toString(2)}: 


DEVscrpt> 


关于 【代码 6-19】 的 分 析 如 下 : 

这 段 代 码 主要 就 是 将 负数 〈-15) 转换 为 二 进 制 数 ， 并 进行 了 输出 操作 。 

运行 页 面 ， 调 试 信息 如 图 6.22 所 示 。 
[Inspec Cons Debuc Style Ec Perform Mem Netw Stors 轩 ~" 园 目 窗 日 可 
人 闸 时 Filter output _] PersistLogs 
| -15 to binary is -1111 ~encode-nega-num.html :24:3 


Beasnsnensnsnsnsnsnnnnnnnnsnntnnnnnnnnnnnannnnnnanammaanaaammaaammmanand 


6.22 ECMAScript 位 运算 符 ( 负 数 编 码 ) 


如 图 6.22 所 示 ， 从 第 03 行 代码 输出 的 结果 来 看 ， 负 数 直 接 输 出 了 二 进 制 -1111， 而 不 是 二 i 
制 补 码 形式 ， 这 是 因为 ECMAScript 语法 规范 对 其 进行 了 简化 处 理 ， 也 是 为 了 更 方便 于 设计 人 员 设 
计 开 发 。 

最 后 ， 再 提 一 下 无 符号 整数 的 处 理 方式 。 因 为 无 符号 整数 把 最 后 一 位 (位 31) 作为 一 个 具体 
数位 来 处 理 ， 所 以 无 符号 整数 的 第 32 位 不 表示 数字 的 符号 ， 而 是 具体 的 数值 。 目 然 ， 无 符号 整数 
的 数值 范围 就 变 为 从 0 一 4294967295 了 。 
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ECMAScript 语法 规范 中 定义 所 有 整数 都 默认 存储 为 有 符号 的 整数 。 仅 在 使 用 ECMAScript 
的 位 运算 符 操作 时 ， 才 会 创建 出 无 符号 整数 。 





6.6.3 ”NOT 位 运算 符 及 表达 式 


在 ECMAScript 语法 规范 中 ,位 运算 符 NOT 是 由 否定 号 (~) 来 表示 的 ， 主 要 用 于 二 进 制 算术 
运算 。 位 运算 符 NOT 的 操作 步骤 如 下 : 

第 一 步 ， 将 运算 数 转换 为 32 位 二 进 制 数 。 

第 二 步 ， 再 将 第 一 步 得 到 的 二 进 制 数 转换 为 其 反 码 形式 。 

第 三 步 ， 最 后 将 二 进 制 数 反 码 转换 为 浮 点 数 。 

关于 二 进 制 反 码 的 内 容 ， 与 二 进 制 补 码 类 似 ， 读 者 可 自行 参考 前 文中 提 到 的 书籍 。 即 使 不 去 
详细 了 解 二 进 制 反 码 的 内 容 ， 也 不 影响 对 位 运算 符 NOT 的 使 用 ， 因 为 ECMAScript 语法 规范 仍 会 
默认 输出 十 进 制 数值 。 

下 面 看 一 个 NOT(~) 运 算 符 表达 式 的 代码 示例 ( 详 见 源 代码 ch06 目录 中 的 ch06-es-operator-not. 
html 文件 ) 。 


【代码 6-20】 

01 <script type="text/javascript"> 

02 Var iNum = 255;} 

(OS consoles logq("2509 Fo Dinary 19 0 INUn. EoString(2))s 

04 var iNum NOT = ~iNum; 

05 console Llog( "NOTI2959 to Dinary 19 + TNUum NO EOString(2)): 
06 GonNnSoLle lo NOT 200 159 TINUMm NOLT CootEring(l)): 


Qe 


关于 【代码 6-20】 的 分 析 如 下 : 

这 段 代 码 主要 就 是 对 数值 255 使 用 NOT (~) 运算 符 进 行 了 位 操作 运算 。 

第 04 行 代码 通过 NOT(~) 运 算 符 对 第 02 行 代码 中 定义 的 变量 iNum 进行 了 位 操作 运算 ~iNum。 
运行 页 面 ， 调 试 信 息 如 图 6.23 所 示 。 


Developer Tools - ECMAScript in 15-days - http://localhost:63342 





[a Inspect Consol Debugg Style Edit Performar Memo Netwol Storac 轩 " 园 目 窜 日 


仙 是 Filter output _ | Persist Logs 
| 255 to binary is 11111111 ch06-es-operator-not.html:24:3 
NOT 255 to binary is -1000000060 ch06-es-operator-not.html:26:3 
NOT 255 is -256 ch06-es-operator-not.html:27:3 

>| 


6.23 ECMAScript 位 运算 符 (NOT) 


如 图 6.23 所 示 ， 从 第 03 行 代码 输出 的 结果 来 看 ， 数 值 255 的 二 进 制 数 形式 为 11111111。 

从 第 05 行 代码 输出 的 结果 来 看 ， 对 数值 255 进行 NOT 位 运算 符 操作 后 ， 二 进 制 数 形式 为 
-100000000。 

从 第 06 行 代码 输出 的 结果 来 看 ， 正 好 是 对 数值 255 先 求 反 (二进制 反 码 ) ， 然 后 减 1 的 结果 。 
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6.6.4 _ AND 位 运算 符 及 表达 式 
在 ECMAScript 语法 规范 中 ， 位 运算 符 AND 是 由 和 号 (&) 来 表示 的 ， 主 要 用 于 二 进 制 算术 
和 运算。 使 用 位 运算 符 AND 时 先 要 把 两 个 运算 数 按照 位 对 齐 ， 然 后 根据 表 6.7 中 的 规则 进行 运算 。 


表 6.7 ECMAScript 位 运算 符 (AND ) 规则 


位 运算 (AND) 结果 





下 面 看 一 个 AND 运算 符 表 达 式 的 代码 示例 〈 详 见 源 代 码 ch06 目录 中 的 ch06-es-operator- 
and.html 文件 ) 。 


【代码 6-21 】 

01 <script type="text/javascript"> 

02 Var iNuml = 255; 

El console log("255 to binarey SN EoString (2 

04 Var iNum2 = OxAA; 

Qs consoles Log ("UxAA to binary sn TiNUum2 EosString(2)): 

06 var iNum AND = iNum] & iNum2; 

07 console.10g("255 & OxAA to binary is ™ + iNum AND.toString(2)); 
08 console.1log("255 & OxAA to hex is " + iNum AND.toString(16)); 
09 console.109g("255 & OxAA is "+ iNum AND.toString()); 


10 < /Script> 


关于 【代码 6-21】 的 分 析 如 下 : 

这 段 代 人 码 主要 就 是 对 数值 255 和 0xAA 使 用 AND (&) 运算 符 进行 了 位 操作 运算 。 

第 02 行 代 码 中 定义 了 第 一 个 变量 iINum1， 并 初始 化 赋值 为 数值 255。 

第 04 行 代 码 中 定义 了 第 二 个 变量 INum2， 并 初始 化 赋值 为 十 六 进 制 数值 0xXAA。 这 里 使 用 十 
六 进 制 数 表示 是 为 了 能 够 更 清晰 地 看 出 位 运算 符 AND 的 操作 结果 。 

第 06 行 代码 中 通过 AND(&) 运 算 符 对 变量 iNuml 和 变量 iNum2 进行 了 位 操作 运算 iNuml & 
iNum2， 并 将 结果 返回 值 保存 在 变量 iNum_AND 中 。 

第 07 一 09 行 代 码 中 分 别 对 变量 iNum_AND 使 用 二 进 制 、 十 六 进 制 和 十 进 制 形式 进行 了 输出 。 

运行 页 面 ， 调 试 信 息 如 图 6.24 所 示 。 





Developer Tools - ECMAScript in 15-days - http://localhost:6334: 


Ca Inspect Consol Debugg Style Edit Performat Memo Netwo Storac 轩 " 园 目 窗 口 了 可 


首 时 Filteroutput Persist Logs 
| 255 to binary is 11111111 ch06-es-operator-and.html :24:3 
OxAA to binary is 16161616 ch66-es-operator-and.htmt:26:3 
255 & OxAA to binary is 161061010 ch06-es-operator-and.html:28:3 
255 & OxAA to hex is aa ch06-es-operator-and.html :29:3 
255 & OxAA is 170 chO6-es-operator-and.html :30:3 


TT TT TT TT TT TT TT TOT 


>| 


6.24 ” ECMAScript 位 运算 符 (AND) 
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如 图 6.24 所 示 ， 从 第 03 行 代码 输出 的 结果 来 看 ， 数 值 255 的 二 进 制 数 形式 为 11111111。 

从 第 05 行 代 码 输出 的 结果 来 看 ， 十 六 进 制 数值 0xAA 的 二 进 制 数 形式 为 10101010。 

从 第 07 行 代码 输出 的 结果 来 看 ， 数 值 255 和 0xAA 通过 AND 位 操作 运算 后 ， 运 算 结果 的 二 
进 制 形 式 仍 为 10101010， 该 结果 是 符合 表 6.7 中 的 运算 规则 的 。 

从 第 08 行 代码 输出 的 结果 来 看 ， 值 aa 正 是 十 六 进 制 数 0xAA。 

从 第 09 行 代 码 输出 的 结果 来 看 ， 十 六 进 制 数 0xAA 对 应 的 十 进 制 数 正 是 数值 170。 


6.6.5 ”OR 位 运算 符 及 表达 式 


在 ECMAScript 语法 规范 中 ， 位 运算 符 OR 是 由 符号 〈|) 来 表示 的 ， 主 要 用 于 二 进 制 算术 运算 。 使 
用 位 运算 符 OR 时 同样 要 先 把 两 个 运算 数 按照 位 对 齐 ， 然 后 根据 表 6.8 中 的 规则 进行 运算 。 


表 6.8 ECMAScript 位 运算 符 COR) 规则 


1 





下 面 看 一 个 OR 运算 符 表 达 式 的 代码 示例 〈 详 见 源 代 人 码 ch06 目录 中 的 ch06-es-operator-or.html 
文件 ) ， 这 段 代 码 是 在 【代码 6-21】 的 基础 上 稍 加 修改 而 成 的 ， 读 者 可 以 进行 参考 对 比 。 
【代码 6-22 】 


01 <script type="text/javascript"> 


02 Var iNuml = 255; 

03 econsoleo lodq("255 to binary Sn PNuml. toString(l2h)s 

04 Var iNum2 = 0xAA; 

Qs console.1log ("OxAA to binary is " + iNum2.toString(2)); 

06 var iNum OR = iNuml | iNum2; 

07 console.109("255 | 0xAA to binary is ™ + iNum OR.toString(2))? 
08 consolee。 L109 ("255 | OxAA to hex as Ft INUmM OR,EoOString(16))s 
Wg console log( 2550 UxAN 19 TT TNUmMOR COSCrIing(l))es 


Om /Cel 


关于 【代码 6-22】 的 分 析 如 下 : 

这 段 代 码 主要 就 是 对 数值 255 和 0xAA 使 用 OR 运算 符 进 行 了 位 操作 运算 。 

第 02 行 代码 中 定义 了 第 一 个 变量 iINum1， 并 初始 化 赋值 为 数值 255。 

第 04 行 代 码 中 定义 了 第 二 个 变量 iNum2， 并 初始 化 赋值 为 十 六 进 制 数 值 0xXAA。 这 里 使 用 十 
六 进 制 数 表示 是 为 了 能 够 更 清晰 地 看 出 位 运算 符 OR 的 操作 结果 。 

第 06 行 代码 中 通过 OR (|) 运算 符 对 变量 iNuml 和 变量 iNum2 进行 了 位 操作 运算 iNuml | 
iNum2， 并 将 结果 返回 值 保存 在 变量 iNum_OR 中 。 

第 07 一 09 行 代码 中 分 别 对 变量 iNum_OR 使 用 二 进 制 、 十 六 进 制 和 十 进 制 形式 进行 了 输出 。 

运行 页 面 ， 调 试 信 息 如 图 6.25 所 示 。 
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Developer Tools - ECMAScript in 15-days - http://localhost:6334: 





a Inspect Consol Debugg Style Edit Performar Memo' Netwol Storac 回 * 园 目 闻 日 口 


曾 时 Filteroutput _| Persist Logs 
255 to binary is 1111111]1 chO6-es-operator-or.html :24:3 
OxAA to binary is 10101010 ch86-es-operator-or.html:26:3 
255 | OxAA to binary is 11111111 chg6-es-operator-or.html:28:3 
255 | OxAA to hex is ff ch06-es-operator-or.html:29:3 
255 | OxAA is 255 chO6-es-operator-or.html :30:3 


Desanenenenensnens nn nnn nn nn 


6.25 ” ”ECMAScript 位 运算 符 (OR) 


如 图 6.25 所 示 ， 从 第 03 行 代码 输出 的 结果 来 看 ， 数 值 255 的 二 进 制 数 形式 为 11111111。 

从 第 05 行 代码 输出 的 结果 来 看 ， 十 六 进 制 数值 0xAA 的 二 进 制 数 形式 为 10101010。 

从 第 07 行 代码 输出 的 结果 来 看 ， 数 值 255 和 0xAA 通过 OR 位 操作 运算 后 ， 运 算 结果 的 二 进 
制 形式 仍 为 11111111， 该 结果 是 符合 表 6.8 中 的 运算 规则 的 。 

从 第 08 行 代码 输出 的 结果 来 看 ， 值 任 正 是 十 六 进 制 数 0xAA。 

从 第 09 行 代码 输出 的 结果 来 看 ， 十 六 进 制 数 0xAA 对 应 的 十 进 制 数 正 是 数值 255。 


6.6.6 XOR 位 运算 符 及 表达 式 


在 ECMAScript 语法 规范 中 ,位 运算 符 XOR 是 由 符号 〈^) 来 表示 的 ， 主要 用 于 二 进 制 算术 运 
算 。 使 用 位 运算 符 XOR 时 同样 要 把 先 两 个 运算 数 按照 位 对 齐 ， 然 后 根据 表 6.9 中 的 规则 进行 运算 。 


表 6.9 ECMAScript 位 运算 符 (XOR) 规则 


1 Lo 





下 面 看 一 个 XOR 运算 符 表 达 式 的 代码 示例 〈( 详 见 源 代 人 码 ch06 目录 中 的 
ch06-es-operator-xor.html 文件 ) ， 这 段 代 码 是 在 【代码 6-21】 和 【代码 6-22】 的 基础 上 稍 加 修改 而 
成 的 ， 读 者 可 以 进行 参考 对 比 。 


【代码 6-23】 

01 <script type="text/javascript"> 

02 Var iNuml = 255; 

V3 console Iog("255 tO binary T1300 FINUImM LOString(l2n): 

04 Var iNum2 = 0xAA; 

与 Console .log("0xRARA to binary is " + iNum2.toString(2)); 

06 Var iNum XOR = iNuml ^ iNum2; 

07 console .110g ("299 OxAAX TO binary 19 ”PIN XOR toString(2)): 
08 console. L109g (2955 0xAA to hex 19 iNum XOR,.toString(16)): 
bs, SoOnsole log(T2550 UxAASTog TT INUum XOR. OoEenoO ys 


109 /seripk> 


关于 【代码 6-23】 的 分 析 如 下 : 
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这 段 代 码 主要 就 是 对 数值 255 和 0xAA 使 用 XOR 运算 符 进 行 了 位 操作 运算 。 

第 02 行 代码 中 定义 了 第 一 个 变量 iINum1， 并 初始 化 赋值 为 数值 255。 

第 04 行 代码 中 定义 了 第 二 个 变量 iNum2， 并 初始 化 赋值 为 十 六 进 制 数 值 0xXAA。 这 里 使 用 十 
六 进 制 数 表示 是 为 了 能 够 更 清晰 地 看 出 位 运算 符 XOR 的 操作 结果 。 

第 06 行 代 码 中 通过 XOR (^) 运算 符 对 变量 iNuml 和 变量 iNum2 进行 了 位 操作 运算 iNuml^ 
iNum2， 并 将 结果 返回 值 保存 在 变量 iNum_XOR 中 。 

第 07 一 09 行 代码 中 分 别 对 变量 iNum_XOR 使 用 二 进 制 、 十 六 进 制 和 十 进 制 形式 进行 了 输出 。 

运行 页 面 ， 调 试 信 息 如 图 6.26 所 示 。 





Developer Tools - ECMAScript in 15-days - http://localhost:6334 
a Inspect Consol Debugg Style Edit Performar Memo Netwo! Storac 轩 " 轩 上 日 窜 吕 了 g 


人 闸 时 Filter output | Persist Logs 
| 255 to binary is 1111111]1 ch06-es-operator-xor.html :24:;3 
BxAA to binary is 10161610 ch06-es-operator-xor.html :26:3 
255 ”^ OxAA to binary is 1010101 ch06-es-operator-xor.html :28:3 
255 ^ OxAA to hex is 55 chg6-es-operator-xor.html :29:3 
255 个 OQxAA is 85 ch06-es-operator-xor.html :30:3 

pa | 


6.26 ECMAScript 位 运算 符 (XOR) 


如 图 6.26 所 示 ， 从 第 03 行 代码 输出 的 结果 来 看 ， 数 值 255 的 二 进 制 数 形式 为 11111111。 

从 第 05 行 代码 输出 的 结果 来 看 ， 十 六 进 制 数值 0xAA 的 二 进 制 数 形式 为 10101010。 

从 第 07 行 代码 输出 的 结果 来 看 ， 数 值 255 和 0xAA 通过 XOR 位 操作 运算 后 ， 运 算 结果 的 二 
进 制 形式 为 1010101， 写 成 8 位 二 进 制 就 是 01010101， 该 结果 是 符合 表 6.9 中 的 运算 规则 的 。 

从 第 08 行 代码 输出 的 结果 来 看 ， 值 55 正 是 十 六 进 制 数 0xAA。 

从 第 09 行 代码 输出 的 结果 来 看 ， 十 六 进 制 数 0xAA 对 应 的 十 进 制 数 正 是 数值 85。 


6.6.7” 左 移 运 算 符 及 表达 式 


在 ECMAScript 语法 规范 中 ， 左 移 运算 符 是 由 符号 (<<) 来 表示 的 ， 主 要 用 于 实现 将 数字 中 的 
所 有 数位 癌 左 移动 指定 数量 位 数 的 二 进 制 算 木 运算 。 

对 于 在 左 移 运 算 时 数字 右边 可 能 会 多 出 的 者 干 空 位 ， 将 使 用 数字 0 来 填充 ， 保 证 结果 成 为 完 
整 的 32 位 二 进 制 数 。 

震 要 注意 的 是 ， 左 移 运算 会 保留 数字 的 符号 位 〈 第 32 位 ) 。 不 过 设计 人 员 不 用 担心 ， 一 般 不 
能 直接 访问 第 32 位 符号 位 ， 一 切 都 是 通过 ECMAScript 语法 规范 在 后 台 实 现 的 。 

下 面 看 一 个 左 移 (<<) 运算 符 表 达 式 的 代码 示例 ( 详 见 源 代码 ch06 目录 中 的 ch06-es-operator- 
shl.html 文件 ) 。 


【代码 6-24】 

01 <script type="text/javascript"> 

02 Var iNum = 255;} 

03 Sonaole Log(lT255 EONDmary 419 Nm On 2 

04 var iNum shl 2 = iNum << 2; 

05 SOnsole Lom( 2ooR<2EOpimaoryoTNUngSsnl EEC 
06 console.109 ("250 << 21 "TiNm Shi 2.toString())? 
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07 var iNum shl 8 = iNum << 8; 

08 eongsole og(l 2 << 0 bo inary 199 LNUum Sno Cootreing(2l)s 
JE eongole log (2 OSINOnonnSEoocenang hs 

10 var iNum sh]l 16 = iNum << 16; 

Ja console.log("255 << 16 to binary is ”+ iNum shl 16.toString (2))}; 
2 eongole log(P259 < 060519 | iNum shl 10.toSEring(l)): 

3 var iNum shl 32 = iNum << 32; 

14 consoles log( 2 < 92 to bmary 19° 1 Nun shi92.EoGrmal2) 
1 econsoles log(T259 < 3290190 TF INm ashi 3 COSteingl)): 


0 “/scrint> 


关于 【代码 6-24】 的 分 析 如 下 : 

这 段 代码 主要 就 是 对 数值 255 使 用 左 移 ‘<<) 运算 符 进行 了 位 操作 运算 。 

第 02 行 代码 中 定义 了 一 个 变量 Aum， 并 初始 化 赋值 为 数值 255。 

第 04 行 代码 中 使 用 左 移 (<<) 运算 符 对 变量 iNum 进行 了 两 位 左 移 运 算 操作 (iNum <<2) 。 
第 07 行 代码 中 使 用 左 移 (<<) 运算 符 对 变量 iNum 进行 了 8 位 左 移 运 算 操作 (iNum << 8) 。 
第 10 行 代码 中 使 用 左 移 (<<) 运算 和 从 对 变量 iNum 进行 了 16 位 左 移 运 鼻 操作 (CiNum << 16)。 
第 13 行 代 码 中 使 用 左 移 (<<) 运算 符 对 变量 iNum 进行 了 32 位 左 移 运算 操作 (iNum << 32) 。 
运行 页 面 ， 调 试 信息 如 图 6.27 所 示 。 


Developer Tools - ECMAScript in 15-days - http://localhost:6334 





[a Inspect Consol Debugg Style Edit Performar Memo Netwo' Storac 轩 " 园 日 容 日 可 


会 时 Filter output Persist Logs 
255 to binary is 11111111 ch06-es-operator-shl.html:24:3 
255 << 2 to binary is 1111111106 ch06-es-operator-shl.html:26:3 

| 255 << 2 is 1620 ch06-es-operator-shl .html:27:3 
255 << 8 to binary is 1111111106606066 ch06-es-operator-shil .html :29:3 
255 << 8 is 65286 ch06-es-operator-shl.html :30:3 
255 << 16 to binary is ch06-es-operator-shl.html :32:3 
1111111100606066606066660 
255 << 16 is 16711686 ch06-es-operator-shl.html :33:3 
255 << 32 to binary is 11111111 ch06-es-operator-shl.html:35:3 
255 << 32 is 255 ch06-es-operator-shl.html:36:3 


Eee 


| 一 一 一 …- 
i>| | 


6.27 ” ECMAScript 位 运算 符 ( 左 移 ) 


如 图 6.27 所 示 ， 从 第 03 行 代码 输出 的 结果 来 看 ， 数 值 255 的 二 进 制 数 形式 为 11111111。 

从 第 05 和 第 06 行 代码 输出 的 结果 来 看 ， 对 数值 255 左 移 两 位 后 的 结果 为 1111111100， 右 边 
空位 自动 补 0 了 。 

从 第 08 和 第 09 行 代 码 输 出 的 结果 来 看 , 对 数值 255 左 移 8 位 后 的 结果 为 1111111100000000， 
右边 宇 位 同样 自动 补 0 了 。 

从 第 11 和 第 12 行 代 码 输出 的 结果 来 看 ， 对 数值 255 左 移 16 位 后 的 结果 为 
111111110000000000000000， 右 边 空位 依然 自动 补 0 了 。 

从 第 14 和 第 15 行 代码 输出 的 结果 来 看 ， 对 数值 255 左 移 32 位 后 的 结果 为 11111111, 说 明 左 
移 32 位 的 操作 结果 仍 为 初始 值 。 


6.6.8 保留 符号 位 的 右 移 运 算 符 及 表达 式 


在 ECMAScript 语法 规范 中 ， 保 留 符号 位 的 右 移 运算 符 是 由 符号 (> 之 ) 来 表示 的 ， 主 要 用 于 实现 
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将 数字 中 的 所 有 数位 癌 右 移动 指定 数量 位 数 ， 且 保留 该 数 的 符号 〈 正 号 或 负 号 ) 位 的 二 进 制 算术 运算 。 

对 于 在 右 移 运算 时 数字 左边 可 能 会 多 出 的 者 干 空 位 ， 将 使 用 数字 0 来 填充 ， 保 证 结果 成 为 完 
整 的 32 位 二 进 制 数 。 

下 面 看 一 个 保留 符号 位 的 右 移 〈>>) 运算 符 表 达 式 的 代码 示例 〈 详 见 源 代码 ch06 目录 中 的 
ch06-es-operator-shr.html 文件 ) 。 

【代码 6-25】 


WL 
U2 
Wi 
04 
US 
06 
07 
08 
es, 
10 
加 
1 
3 
14 
15 
下 各 


<script type="text/javascript"> 


Var iNum = 2139095040; 

console .log("2139095040 to binary is " + iNum.toString (2)); 

var iNum shr 2 = iNum >> 2; 

consoles 1og ("2139095040 >>2to binary i139” 1 iNuom shr 2.toString (2)): 
eonsole. log ("2139095040 >>219 riNumshr 2 toString())s 

var iNum shr 8 = iNum >> 8; 

console.10g("2139095040 >> 8 to binary is " + iNum shr 8.toString(2)); 
Consoles1og ("2139095040 >>8°719 1Num shr 8 EoString()); 

var iNum shr 16 = iNum >> 16; 

console.109g9("2139095040 >> 16 to binary is" + iNum shr 16.toString(2));? 
console. Log( 2139095040° >>10 11999 iINun shrlo tottering(l)y: 

var i1Num shr 32 = 1Num << 32;} 

console log( 2139095040 >>32 0 Dinary 1907 Tt iNum shr 32 .E01ing(2)): 
econsole Log( 2139095040 >>320919 TINUu shr32 toString(l)): 


KWSCETDT> 


关于 【代码 6-25】 的 分 析 如 下 : 

这 段 代 码 主要 就 是 对 数值 2139095040 使 用 右 移 (>> ) 运 算 符 进行 了 保留 符号 位 的 位 操作 运算 。 
第 02 行 代码 中 定义 了 一 个 变量 iNum， 并 初始 化 赋值 为 数值 2139095040。 

第 04 行 代码 中 使 用 右 移 (>> ) 运算 符 对 变量 iNum 进行 了 两 位 右 移 运算 操作 (iNum >> 2) 。 
第 07 行 代 码 中 使 用 右 移 (>>) 运算 符 对 变量 iNum 进行 了 8 位 右 移 运算 操作 (iNum >> 8) 。 
第 10 行 代码 中 使 用 右 移 (>> ) 运算 符 对 变量 iNum 进行 了 16 位 右 移 运算 操作 (iNum >> 16 ) 。 
第 13 行 代码 中 使 用 右 移 (>> ) 运算 符 对 变量 iNum 进行 了 32 位 右 移 运算 操作 (iNum >> 32) 。 
运行 页 面 ， 调 试 信 息 如 图 6.28 所 示 。 





Developer Tools - ECMAScript in 15-days - http://localhost:63342/WebstormProje 
a Inspector Console Debugger Style Editor Performance Memory Network Storage 田园 目 窗口 了 口 


闪 | 时 Filter output _] Persist Logs 
2139695646 to binary is 1l11111111600600660660666066666666 ch@6-es-operator-shr,.html :24:3 
2139695646 >> 2 to binary is 11111111066066066066666666666 ch66-es-operator-shr.htnmt:26;3 

| 。 2139695646 >> 2 is 534773766 che6-es-operator-shr.html:27:3 
2139695646 >> 8 to binary is 111111119066066066066666 chO6-es-operator-shr.html :29:3 
21396958640 >> 8 is 8355846 che6-es-operator-shr.html :30:3 
2139895646 >> 16 to binary is 111111116906600 ch66-es-Operator-shr.htnmt:32:3 
21396958640 >> 16 is 32640 che6-es-operator-shr.html :33:3 
21396958640 >> 32 to binary is 111111119660690660060060060066006 ch66-es-operator-shr.html:35:3 
2139695646 >> 32 is 2139695040 ch66-es-operator-shr.htmt;36;3 

| | 


6.28 ” ECMAScript 位 运算 符 〈 保 留 符号 位 的 右 移 ) 


如 图 6.28 所 示 ， 从 第 03 行 代码 输出 的 结果 来 看 ， 数 值 2139095040 的 二 进 制 数 形式 为 
1111111100000000000000000000000。 
从 第 05 和 第 06 行 代码 输出 的 结果 来 看 ， 对 数值 2139095040 右 移 两 位 后 的 结果 为 
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11111111000000000000000000000。 

从 第 08 和 第 09 行 代码 输出 的 结果 来 看 ， 对 数值 2139095040 右 移 8 位 后 的 结果 为 
11111111000000000000000。 

从 第 11 和 第 12 行 代 码 输出 的 结果 来 看 ， 对 数值 2139095040 右 移 16 位 后 的 结果 为 
111111110000000。 

从 第 14 和 第 15 行 代码 输出 的 结果 来 看 ， 对 数值 2139095040 右 移 32 位 后 的 结果 仍 为 
2139095040， 说 明 保 留 符 号 位 的 右 移 32 位 的 操作 结果 仍 为 初始 值 。 


6.6.9 ”无 他 号 位 的 右 移 运算 从 及 表达 式 


在 ECMAScript 语法 规范 中 ， 无 符号 位 的 右 移 运 算 符 是 由 符号 〈>>>) 来 表示 的 ， 主 要 用 于 实 
现 将 数字 中 的 所 有 数位 (包括 第 32 位 的 符号 位 ) 整体 向 右 移动 指定 数量 位 数 的 二 进 制 算术 运算 。 

对 于 正 数 的 无 符号 位 右 移 运算 ， 其 结果 与 保留 符号 位 的 右 移 运算 是 一 致 的 。 但 对 于 负数 来 说 ， 
无 符号 位 的 右 移 运算 与 保留 符号 位 的 右 移 运 算 的 结果 就 完全 不 一 致 了 。 

下 面 看 一 个 无 符号 位 的 右 移 (>>>) 运算 符 表 达 式 的 代码 示例 〈 详 见 源 代码 ch06 目录 中 的 
ch06-es-operator-shr-nosign.html 文件 ) 。 


【代码 6-26】 

01 <script type="text/javascript"> 

02 Var iNum = 256; 

EE] consoleslog("250 Eo binary 19 "| iNum toString(2)}y: 

04 var iNum shr = iNum >> 8; 

(0 eoOnsolev log(s2506 >> 9 Eo binary T1909 FINam she EOSteing lt2): 

06 Sonsole. 1o09gN("256 >>019% iNm ehre tostring())s 

QT var iNum shr nosign = iNum >>> 8; 

08 console Iog( 250 >>>°0 to binary T1990 .Numeshr nosign tootring(2)): 
09 Seongsole Iog("256 >>>8 1419 1 iNumnshanosian Osteing()): 

10 var iNum minus = -256; 

4 加 | console. 109("-256 to binary is "+ iNum minus.toString(2))? 

2 var iNum shr minus = iNum minus >> 8; 

bs | console. 10g9( 25606>>0tobinary 19%" TiNum shr minus. toSstring(2)): 
14 eonsoleslog( 290 >> 8019 riNumesheminus tosteing(l))s 

1 var iNum shr nosign minus = iNum minus >>> 8; 

16 Console. 10g9 ("=256 >>>8to binary 1s" TiNum shr nosign minus. toString(2)): 
hy, console.10g("-256 >>> 8 is "十 iNum shr nosign minus.toString()); 


TO Spl 


关于 【代码 6-26】 的 分 析 如 下 : 

这 段 代 码 主要 就 是 对 正 数 256 和 负数 -256， 同 时 分 别 使 用 保留 符号 位 的 右 移 (>>) 运算 符 和 
无 符号 位 的 右 移 (>>>) 运算 符 进行 了 位 操作 运算 ， 目 的 就 是 验证 一 下 无 符号 位 的 右 移 (>>>) 运 
算 符 对 于 正 数 和 负数 的 不 同 操作 结果 。 

运行 页 面 ， 调 试 信 息 如 图 6.29 所 示 。 
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Developer Tools - ECMAScript in 15-days - http://localhost:63342/WebstormProjt 


a Inspector Console Debugger Style Editor Performance Memory Network Storage 骨 ~ 轩 日 窗口 可 


闸 时 Filter output | Persist Logs 
256 to binary is 160606868660 chg6-es-operator-shr-nosign.html :24:;3 
256 >> 8 to binary is 1 chg6-es-operator-shr-nosign.html:26:3 
256 >> 8 is 1 chO6-es-operator-shr-nosign.html:27:3 
256 >>> 8 to binary is 1 chO6-es-operator-shr-nosign.html:29:3 
| 256 >>> 8 is 1 ch96-es-operator-shr-nosign,htmLi39;3 
-256 to binary is -1996966666 chg6-es-operator-shr-nosign,.html ;32:3 
-256 >> 8 to binary is -1 chg6-es-operator-shr-nosign.html:34:3 
-256 >> 8 is -1 ch@g6-es-operator-shr-nosign.html:35:3 
-256 >>> 8 to binary is 1l111111111111111111111111 ch@6-es-operator-shr-nosign.html:37:3 
-256 >>> 8 is 16777215 chg6 -es-operator-shr-nosign.html:38:3 
>| 


6.29 ” ECMAScript 位 运算 符 《〈 无 符号 位 的 右 移 ) 


如 图 6.29 所 示 ， 从 第 03 行 代码 输出 的 结果 来 看 ， 数 值 256 的 二 进 制 数 形式 为 100000000。 

从 第 04 一 06 行 代 码 输出 的 结果 来 看 ， 对 数值 256 使 用 保留 符号 位 的 右 移 (>>) 运算 符 右 移 8 
位 后 的 结果 为 1。 

从 第 07 一 09 行 代码 输出 的 结果 来 看 ， 对 数值 256 使 用 无 符号 位 的 右 移 (>>>) 运算 符 右 移 8 
位 后 的 结果 仍 为 1。 

这 就 说 明 对 于 正 数 ， 保 留 符号 位 的 右 移 (>>) 运算 符 和 无 符号 位 的 右 移 (>>>) 运算 符 操作 的 
结果 是 一 致 的 。 

从 第 11 行 代码 输出 的 结果 来 看 ， 数 值 -256 的 二 进 制 数 形式 为 -100000000。 

从 第 12 一 14 行 代码 输出 的 结果 来 看 ， 对 数值 -256 使 用 保留 符号 位 的 右 移 (>>) 运算 符 右 移 8 
位 后 的 结果 为 -1。 

而 从 第 15 一 17 行 代 码 输出 的 结果 来 看 ， 对 数值 -256 使 用 无 符号 位 的 右 移 (>>>) 运算 符 右 移 
8 位 后 的 结果 仍 为 16777215。 

这 就 说 明 对 于 负数 ， 保 留 符号 位 的 右 移 〈>> ) 运算 符 和 无 符号 位 的 右 移 (>>>) 运算 符 操作 的 
结果 是 不 一 致 的 。 因 为 无 符号 位 的 右 移 运算 会 将 符号 位 的 数值 1 一 起 右 移 , 所 以 操作 后 数值 结果 会 


6.7 “ECMAScript 逻辑 运算 符 及 表达 式 


在 ECMAScript 语法 规范 中 , 逻辑 运算 占有 非 贡 重要 的 地 位 。 为 什么 这 么 说 呢 ? 因为 在 程序 中 
会 有 大 量 的 条 件 判 断 语句 是 依赖 于 逻辑 运算 来 完成 的 。 


6.7.1 逻辑 运算 符 与 表达 式 概 述 


逻辑 运算 符 用 来 确定 变量 或 值 之 间 的 逻辑 关系 。ECMAScript 语法 规范 中 定义 的 逻辑 运算 符 与 
表达 式 详 见 表 6.10。 
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表 6.10 “ECMAScript 逻辑 运算 符 与 表达 式 


运算 符 ”| 描述 
&& | 与 (AND) |ce&aez |e 
ne 


(<DI>D) 


6.7.2 ”ToBoolean 逻辑 值 转换 操作 





在 ECMAScript 语法 规范 中 , 定义 了 转换 逻辑 值 的 ToBoolean 操作 ， 用 于 将 各 种 类 型 的 值 转换 
为 逻辑 值 ， 具 体 规则 详 见 表 6.11。 


表 6.11 ToBoolean 规则 


ToBoolean 操作 结果 
false 





下 面 看 一 个 ToBoolean 操作 的 代码 示例 ( 详 见 源 代码 ch06 目录 中 的 ch06-es-operator-toBoolean. 
html 文件 ) 。 


【代码 6-27 】 

01 <script type="text/javascript"> 

02 console .log("ToBoolean (null) = " + Boolean (nul]l)); 

03 console.log("ToBoolean (Undefined) = " + Boolean (undefined) ) ; 
04 console.log("ToBoolean(true) = " + Boolean (true)); 

Us console .log("ToBoolean (false) = " + Boolean (false) ) : 

06 console.log ("ToBoolean(+0) = " + Boolean (+0)); 

四 党 console.log("ToBoolean(-0) = " + Boolean(-0)); 

08 console .log("ToBoolean (NaN) = " + Boolean (NaN));} 

09 console .log("ToBoolean (1) = " + Boolean (1) ) ; 

LU console .log("ToBoolean ('ECMAScript') = " + Boolean ("ECMAScript")); 
1 eonsolee log(“"ToBoolLeant(”") = BOoOLeam ) > 


To SCUDE> 


关于 【代码 6-27】 的 分 析 如 下 : 

这 段 代 码 主要 就 是 使 用 ToBoolean 操作 , 将 一 些 原 始 值 或 特殊 值 转换 为 Boolean 类 型 的 值 。 这 
里 需要 注意 的 是 ， 在 ECMAScript 语法 规范 中 并 没有 ToBoolean 这 个 方法 (这 与 String 类 型 的 
toString() 方 法 是 不 同 的 ) ， 不 过 可 以 使 用 Boolean() 方 法 进行 强制 类 型 转换 。 

运行 页 面 ， 调 试 信息 如 图 6.30 所 示 。 
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Developer Tools - ECMAScript in 15-days - http://localhost:63342/WebstormPi 


[a Inspector Console Debugger Style Editor Performance Memory Network Storage 团 " 园 目 容 日 可 


茄 时 Filter output | JPersist Logs 
ToBoolean(null) = faise ch06-es-operator-toBoolean. html :23:3 
ToBoolean(Undefined) = false ch06-es-operator.-toBoolean, html ;24:3 
ToBoolean(true) = true chO6-es-operator-toBoolean.html :25:3 

| ToBoolean(false) = false ch06-es-operator-toBoolean. html ;26:3 
ToBoolean(+0) = false ch06-es-operator-toBoolean.html :27:3 
ToBoolean( -0) = false ch06-es-operator-toBoolean.html :28:3 
ToBoolean(NaN) = false ch06-es-operator-toBoolean,. html ;29:3 
ToBoolean(1) = true ch06-es-operator-toBoolean.htmil :30:3 
ToBoolean( "ECMAScript ') = true ch06-e5-operator-toBoolean. html :31:3 
ToBoolean("') = false ch06-es-operator-toBoolean.html :32:3 

加 | 








6.30 ECMAScript 逻辑 运算 (ToBoolean 操作 ) 


如 图 6.30 所 示 ， 从 第 02 和 第 03 行 代码 输出 的 结果 来 看 ， 通 过 Boolean0 方 法 对 原始 值 null 和 
undefined 强制 类 型 转换 后 ， 返 回 值 均 是 布尔 值 false。 

从 第 04 和 第 05 行 代 码 输出 的 结果 来 看 ， 通 过 Boolean() 方 法 对 布尔 值 强制 类 型 转换 后 ， 返 回 
值 仍 是 原 布尔 值 。 

从 第 06 和 第 07 行 代码 输出 的 结果 来 看 ， 通 过 Boolean() 方 法 对 +0 和 -0 强制 类 型 转换 后 ， 返 回 
值 均 是 布尔 值 false。 

从 第 08 行 代 码 输 出 的 结果 来 看 ， 通 过 Boolean() 方 法 对 原始 值 NaN 强制 类 型 转换 后 ， 返 回 值 


是 布尔 值 false。 
从 第 09 行 代码 输出 的 结果 来 看 ,通过 Boolean() 方 法 对 数值 1 强制 类 型 转换 后 , 返回 值 是 布尔 
值 true。 


从 第 10 和 第 11 行 代码 输出 的 结果 来 看 ， 通 过 Boolean() 方 法 对 字符 串 强制 类 型 转换 后 ， 非 空 
字符 串 返 回 值 是 布尔 值 tue， 衬 字符 串 返 回 值 是 false。 


6.7.3 AND 运算 符 及 表达 式 


在 ECMAScript 语法 规范 中 ，AND 运 鼻 符 用 于 执行 逻辑 “与 运算， 由 双 和 号 〈&& ) 来 表示 。 
ECMAScript 语法 规范 中 定义 的 逻辑 AND 运算 符 的 规则 详 见 表 6.12。 


表 6.12 ECMAScript 逻辑 运算 符 (AND) 规则 


me me 
me |fse fe | 





se le lise | 


另外 ， 对 于 逻辑 AND 运算 中 的 运算 数 可 以 是 任何 类 型 ， 不 一 定 非 是 Boolean 类 型 值 。 如 果 某 
个 运算 数 不 是 原始 的 Boolean 型 值 ， 那 么 逻辑 AND 运算 后 的 结果 不 一 定 返回 Boolean 类 型 值 。 

ECMAScript 语法 规 邯 中 对 这 方面 的 内 容 具 体 说 明 如 下 : 

@ 如果 一 个 运算 数 是 对 象 ， 另 一 个 是 Boolean 类 型 值 tue， 则 会 返回 该 对 象 。 

@ 如果 两 个 运算 数 都 是 对 象 ， 则 返回 第 二 个 对 象 。 
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@ 如 果 某 个 运算 数 是 原始 值 null， 则 返回 原始 值 null。 
@ 如 果 某 个 运算 数 是 原始 值 NaN， 则 返回 原始 值 NaN。 
@ 如果 某 个 运算 数 是 原始 值 undefined， 则 返回 原始 值 undefined。 


下 面 看 一 个 逻辑 AND 运算 符 表 达 式 的 代码 示例 ( 详 见 源 代码 ch06 目录 中 的 ch06-es-operator- 
logical-and.html 文件 ) 。 
【代码 6-28】 


01 <script type="text/javascript"> 


02 Var b 11 = true &é& true; 

EE console.log("true && true = "+ Db 11); 
04 Var b 10 = true && false; 

05 console.log("true && false = "+ b 10); 
06 Var b 01 = false &é& true; 

OF console.log("false &é& true = "+ b 01); 
08 var b 00 = false && false; 

09 console.log("false && false = "+ b 00); 
ab var b null = DuUll && true; 

3kal console.log("null kk true = "+ Db nul]l); 
了 var b NaN = NaN && true; 

1 console.log("NaN g&é& true = "+ b NaN); 
14 var b undefined = undefined &é true; 

3 console.log ("undefined &&k true = " + b undefined); 


3 Le sol oh et 


关于 【代码 6-28】 的 分 析 如 下 : 
这 段 代 码 主 要 就 是 使 用 逻辑 AND 运算 符 〈&&) 对 原始 值 和 特殊 值 进行 了 J 逻辑 “与 ”操作 运算 。 
运行 页 面 ， 调 试 信息 如 图 6.31 所 示 。 





Developer Tools - ECMAScript in 15-days - http://localhost:63342/\ 


[a Inspectc Consol Debugg Style Edit Performan Memor Networ Storag 半 ~ 轩 日 光 口 可 


闸 时 Filter output 语 Persist Logs 
| true && true = true "ODerator-logical -and, htnl:24:3 
truc && folsc = folsec -Operator-LogicaL-and .htntiz6:3 
false && true = false “Operator-logical -and.htnl:28:3 
false && false = false "operator-logical -and, htnl: 30:3 
null && truc = null “opecrotor-logicaol -and,. htmnl; 32;3 
NaN && true = NaN .Operator-LogicaL-and .htntL:34:3 
undefined £&&k true = undefined --operator-LogicalL-and .htnt:36:3 


6.31 ECMAScript 逻辑 运算 符 (AND) 


如 图 6.31 所 示 ， 从 第 03、 第 05、 第 07 和 第 09 行 代码 输出 的 结果 来 看 ，Boolean 值 之 间 的 逻 
辑 AND 运算 返回 值 与 表 6.12 中 的 定义 是 一 致 的 。 

从 第 11、 第 13 和 第 15 行 代码 输出 的 结果 来 看 ， 对 于 原始 值 null、NaN 和 undefined 与 其 他 运 
算数 之 间 的 逻辑 AND 运算 返回 值 仍 是 其 本 身 。 


6.7.4 ”OR 运算 符 及 表达 式 


在 ECMAScript 语 法 规范 中 ,OR 运算 符 用 于 执行 逻辑 "或 ?运算 ,由 符号 (| 来 表示 。ECMAScript 
语法 规范 中 定义 的 逻辑 OR 运算 符 的 规则 详 见 表 6.13。 


Le 
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表 6.13 ECMAScript 逻辑 运算 符 (OR) 规则 





另外 , 与 逻辑 AND 运算 从 一 样 ,逻辑 OR 运算 中 的 运算 数 可 以 是 任何 类 型 ,不 一 定 非 是 Boolean 
类 型 值 。 如 果 菏 个 运算 数 不 是 原始 的 Boolean 型 值 , 那么 逻辑 OR 运算 后 的 结果 不 一 定 返回 Boolean 
类 型 值 。 
ECMAScript 语法 规范 中 对 OR 运算 的 具体 说 明 如 下 : 
如 果 一 个 运算 数 是 对 象 且 其 左边 的 运算 数值 均 为 false， 则 返回 该 对 象 。 
如 果 两 个 运算 数 都 是 对 象 ， 则 返回 第 一 个 对 象 。 
如 果 最 后 一 个 运算 数 是 null， 并 且 其 他 运算 数值 均 为 false， 则 返回 null。 
如 果 最 后 一 个 运算 数 是 NaN， 并 且 其 他 运算 数值 均 为 false， 则 返回 NaN。 
如 果 最 后 一 个 运算 数 是 undefined， 并 且 其 他 运算 数值 均 为 false， 则 返回 undefined。 


下 和 耐看 一 个 逻辑 OR 运算 符 表 达 式 的 代码 示例 〈 详 见 源 代 人 码 ch06 目录 中 的 ch06-es-operator- 
logical-or.html 文件 ) 。 


【代码 6-29】 

01 <script type="text/javascript"> 

02 var b 11 = true || true; 

| console.。1og (true ll true= DLL) 

04 var b 10 = true || false; 

Ws console.log("true || false =" +b 10); 

06 var b 01 = false || true; 

07 console.log("false || true = " + b 01); 

08 var b 00 = false || false; 

Es, console.log("false || false = "+ b 00); 

10 var b null true = null || true; 

Ia! console.log("null || true = "+ Db null true); 
12 var b true null = true || null; 

13 console.log("true || null = ”二 b true null); 
14 Var b null false = null || false; 

由 本 console.log( "null || false = ”+ b null false); 
16 var b false _ null = false || null; 

1 console .log(- false || null = " + b false null); 
18 var b NaN true = NaN || true; 

1, console.log("NaN || true = " + b NaN true); 

20 Var b true NaN = true || NaN; 

2 console.log("true || NaN = ”+ b true NaN); 

忆 忆 var b NaN false = NaN || false; 

之 3 console .log("NaN || false = " + b NaN false); 
24 var b false NaN = false || NaN; 

之 console.log("false || NaN = "+ b false NaN); 
26 var b undefined true = undefined || true; 

2 console.log ("undefined || true = " + b undefined true); 


153 


ECMAScript 从 零 开 始 学 ( 视频 教学 版 ) 


28 var b true undefined = true || undefined; 

29 console .log("true || undefined = " + b true undefined) ; 
30 var b undefined false = undefined || false; 

局 console.log("undefined || false = " + b undefined false); 
三 隐 var b false undefined = false || undefined; 

总 二 | console.log("false || undefined = " + b false undefined); 


SA /eine 


关于 【代码 6-29】 的 分 析 如 下 : 
这 段 代 码 主 要 就 是 使 用 逻辑 OR (|) 运算 符 对 原始 值 和 特殊 值 进 行 了 逻辑 “或 ”操作 运算 。 
运行 页 面 ， 调 试 信息 如 图 6.32 所 示 。 





Developer Tools - ECMAScript in 15-days - http://localhost:63342) 


a Inspect' Consol Debugg' Style Edit Performan Memol Netwol Storag 回 - 园 日 容 日 口 


曾 时 Filter output Persist Logs 
true || true = true “~Operator-logical-or,html:24:3 
| true || false = true “Operator-logical-or.html:26:3 
false || true = true “~0perator-logical-or,html:28:3 
false || false = false “Operator-logical-or.html :30:3 
nutt || true = true -DOperator-1ogicat-or,htmti32;3 
true || mutt = true “~Operator-logical-or.html:34:3 
null || false = false “Operator-logical-or,html:36:3 
false || null = null “Operator-logical-or.html :38:3 
NaN || true = true “Operator-logical-or,html:40:3 
true || NaN = true -Operator-logical-or.html:42:3 
NaN || false = false “Operator-logical-or,html:44:3 
false || NaN = NaN -0perator-logical-or.html:46:3 
undefined || true = true -Operator-1Logicat-or,htmti48;3 
true || undefined = true -0perator-logical-or.html :S50:3 
undefined || false = fatse “Operator-logical-or,.html:52:3 
false || undefined = undefined -Operator-logical-or.html:54:3 

>| 


6.32 ”ECMAScript 逻辑 运算 符 (OR ) 


如 图 6.32 所 示 ， 从 第 09、 第 05、 第 07 和 第 09 行 代码 输出 的 结果 来 看 ，Boolean 值 之 间 的 多 
辑 OR 运算 返回 值 与 表 6.13 中 的 定义 是 一 致 的 。 

从 第 11、 第 13、 第 15 和 第 17 行 代码 输出 的 结果 来 看 ， 原 始 值 null 与 Boolean 值 的 逻辑 OR 
运算 返回 值 比较 复杂 。null 与 true 逻辑 OR 运算 ， 不论 前 后 顺序 如 何 均 会 返回 true。 而 null 与 false 
逻辑 OR 运算 ， 若 null 不 在 表达 式 最 后 ， 则 返回 false; 若 null 在 表达 式 最 后 ， 则 返回 null， 这 与 前 
文中 的 描述 是 一 致 的 。 

同样 地 ， 原 始 值 NaN 和 undefined 与 Boolean 值 的 逻辑 OR 运算 返回 值 ， 与 原始 值 null 是 类 似 的 。 


6.7.5 NOT 运算 符 及 表达 式 


在 ECMAScript 语法 规范 中 ，NOT 运算 符 用 于 执行 逻辑 “ 非 ” 运算， 由 感叹 号 〈!) 来 表示 。 
NOT 运算 符 与 逻辑 AND 运算 符 和 逻辑 OR 运算 符 不 同 的 是 ， 逻 辑 NOT 运算 符 的 返回 值 一 定 是 
Boolean 类 型 值 。 

ECMAScript 语法 规范 中 对 逻辑 NOT 运算 符 内 容 的 具体 说 明 如 下 : 

@ 如 果 运 算数 是 对 象 ， 则 返回 值 为 false。 

@ ”如果 运算 数 是 数字 0， 则 返回 值 为 true。 

@ 如 果 运 算数 是 0 以 外 的 任何 数字 ， 则 返回 值 为 false。 
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@ 如 果 运 算数 是 null， 则 返回 值 为 true。 
@ 如 果 运 算数 是 NaN， 则 返回 值 为 true。 
@ 如 果 运 算数 是 undefined， 则 返回 值 为 true。 


下 面 看 一 个 逻辑 NOT 运算 符 表 达 式 的 代码 示例 《〈 详 见 源 代 码 ch06 目录 中 的 ch06-es-operator- 
logical-not.html 文件 ) 。 
【代码 6-30】 


01 <script type="text/javascript"> 


02 var b 01 = !true; 

03 eonsolee LIog(P true =" DO 
04 var b 00 = !false; 

1s) console.log("!false = "+ b 00); 
06 var b 0 = !0; 

07 Conscle .log(> 0 = " | Db 0)> 

08 var eb DI= 1 

09 console.log("!1 = "+b 1); 

10 ver nu = "nul 

ll consolese log( nul = Db nuli), 
1 var b NaN = !NaN; 

13 console.log("!NaN = " + b NaN); 
14 var b undefined = !undefined; 

了 console.log("!'undefined = " + b undefined); 
16 Var obj = new Object() :; 

hi console.log("!object = " + lobj); 


TI60 /SeCript> 


关于 【代码 6-30】 的 分 析 如 下 : 
这 段 代 码 主要 就 是 使 用 逻辑 NOT 〈!) 运算 符 对 原始 值 和 特殊 值 进行 了 逻辑 “ 非 ” 操 作 运算 。 
运行 页 面 ， 调 试 信息 如 图 6.33 所 示 。 





Developer Tools - ECMAScript in 15-days - http://localhost:63342/\ 


a Inspectc Consol Debugg: Style Edit Performan Memor Networ Storag 轩 " 园 上 日 窗口 可 


请 时 Filter output _| Persist Logs 
Itrue = false “Operator-logical -not.html:24:3 
ifalse = true -Operator-logical-not.html:26:3 
10 = true -Operator-logical-not.html:28:3 

| 11 = false -Operator-logical -not.html :30:3 
Iinull = true -Operator-logical -not.html :32:3 
iNaN = true -~Dperator-togicat-not.htnmt:34:3 
iundefined = true ~Operator-logical-not.html:36:3 
iobject = fatse ~Operator-togical -not.html:38:3 

El 


6.33 ”ECMAScript 逻辑 运算 符 (NOT) 


如 图 6.33 所 示 ， 从 第 03、 第 05、 第 07 和 第 09 行 代码 输出 的 结果 来 看 ， 对 Boolean 值 、0 和 
1 的 逻辑 NOT 运算 返回 值 与 预期 是 一 致 的 。 

从 第 11、 第 13 和 第 15 行 代码 输出 的 结果 来 看 ,对 原始 值 null、NaN 和 undefined 的 逻辑 NOT 
运算 返回 值 均 为 true。 

从 第 17 行 代码 输出 的 结果 来 看 ， 对 象 类 型 的 逻辑 NOT 运算 返回 值 为 false。 

以 上 就 是 对 逻辑 NOT(!) 运算 符 的 测试 ， 读 者 可 以 对 比 前 和 面 介绍 的 逻辑 AND (&&) 运算 符 
和 逻辑 OR (|) 运算 符 来 进行 学 习 。 
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6.8 “ECMAScript 赋值 运算 符 及 表达 式 


在 ECMAScript 语法 规范 中 ， 赋 值 运算 符 是 由 等 号 〈=) 来 表示 的 ， 用 于 把 等 号 右边 的 值 赋 给 
等 号 左边 的 变量 。 当然, 在 具体 编程 实践 中 还 可 以 将 加 性 、 乘 性 或 位 运算 符 与 赋值 运算 符 组 合 起 来 
使 用 ， 以 提高 代码 的 简洁 性 ， 称 为 复合 赋值 运算 符 。 

ECMAScript 语法 规范 中 定义 的 赋值 运算 符 的 规则 见 表 6.14。 


表 6.14 ECMAScript 赋值 运算 符 规 则 





x=2147483647 


下 面 看 一 个 使 用 赋值 运算 符 表 达 式 的 代码 示例 〈 详 见 源 代 人 码 ch06 目录 中 的 ch06-es-operator- 
assign.html 文件 ) 。 
【代码 6-31 】 


01 <script type="text/javascript"> 


02 Var i = 1; 

03 console.log ("i = "+ 1)，; 

04 Var j = i; 

05 consolec logq(l"y = 1 jg ™ > 
06 ye 

0 了 console .log("j += i is ™ + j); 
08 ye 

09 console. 109 ("1 = igs we 1)s 
10 j] -= i; 

Tl console.109("] -= 1 19 ™ 了) 
12 = 

二 console 1o0g("y /= TS nEO 
14 j] $= 2; 

下 EGGOnSOLesTLCOOS 有 区 二 2 T1907 | js 
16 j <<= j; 

by console.、 1og("] <<= is 
18 j >>= j; 

19 console .log("j >>= j is "+ j); 
20 var n = -1;} 

有 COnSOeslcdme mn 

As n >>>= 1 
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23 Sonsoles log( ne >>>= Dg mT TN 
240 /seeipt> 


关于 【代码 6-31】 的 分 析 如 下 : 
这 段 代 人 码 主 要 就 是 对 数值 使 用 各 种 赋值 运算 符 进行 运算 ， 具 体 包 括 加 法 赋值 (+=) 、 减 法 赋 


值 (二) 、 乘 法 赋值 (*=) 、 除 法 赋值 三)》、 取 模 赋值 (%=)〉 、 左 移 赋值 (<<=) 、 有 符号 右 移 
/赋值 (>>=) 、 无 符号 右 移 /赋值 (>>>=) 等 几 种 复合 赋值 运算 的 过 程 及 结果 。 


运行 页 面 ， 调 试 信息 如 图 6.34 所 示 。 





Developer Tools - ECMAScript in 15-days - http://localhost:63342/Web 
Ca Inspecto Consolt Debugge Style Editc Performanc Memon Networ| Storagt 轩 " 轩 日 窗口 了 口 


疝 时 Filter output |_J Persist Logs 
| chO6-es-operator-assign.html:24:3 
j= i is 1 che6-es-operator-assign.html :26:3 
j+= i is 2 ch@6-es-operator-assign.html:28:3 

| j *= j is 4 chg6-es-operat assign.html:30:3 
3 chO6-es-operator-assign.html :32:3 
3 che6 -Operator-assign.html:34:3 
=z 1 che6 -Operat assign.html :36:3 

j j chO6-es-operator-assign.html:38:3 

j is 0 che6 -Operator-assign.html :40:3 
chO6-es-operator-assign.html :42:3 

>>>= 1 is 2147483647 he6 -Operator-assign.html:44:;3 


esenemmmeees searrmmees errrmmeenst stresses 


6.34 ” ”ECMAScript 赋值 运算 符 


如 图 6.34 所 示 ， 第 02 行 代 码 定 义 了 变量 1i， 并 初始 化 赋值 为 1。 

第 04 行 代码 定义 了 变量 j， 并 初始 化 赋值 为 变量 i 的 值 。 

从 第 07 行 代 码 输 出 的 结果 来 看 ， 变 量 j 进行 加 法 赋值 j+= i 后， 返回 值 为 2。 

从 第 09 行 代码 输出 的 结果 来 看 ， 变 量 j 进行 乘法 赋值 j *=j 后 ， 返 回 值 为 4。 

从 第 11 行 代 码 输 出 的 结果 来 看 ， 变 量 j 进行 减法 赋值 j -=i 后， 返回 值 为 3。 

从 第 13 行 代码 输出 的 结果 来 看 ， 变 量 j 进行 除法 赋值 j /=i 后， 返回 值 仍 为 3。 

从 第 15 行 代码 输出 的 结果 来 看 ， 变 量 j 进行 取 模 赋值 j %= 2 后 ， 返 回 值 为 1。 

从 第 17 行 代 码 输出 的 结果 来 看 ， 变 量 j 进行 左 移 赋值 j <<=j 后 ， 返 回 值 为 2。 

从 第 19 行 代码 输出 的 结果 来 看 ， 变 量 j 进行 保留 符号 位 的 右 移 赋值 j >>=j 后 ， 返 回 值 为 0。 
第 20 行 代码 定义 了 变量 n， 并 初始 化 赋值 为 负 整数 -1。 

第 21 行 代码 对 变量 n 进行 无 符号 位 的 右 移 赋值 j >>>= 1。 

从 第 22 行 代 码 输出 的 结果 来 看 ， 无 符号 位 的 右 移 赋值 >>>= 操 作 返 回 值 为 2147483647。 


6.9 ECMAScript 条 件 运 算 符 及 表达 式 


在 ECMAScript 语法 规范 中 ,条件 运算 符 是 表现 形式 上 相对 较 复杂 的 一 种 ,实际 上 将 其 理解 为 


一 种 特殊 的 表达 式 似乎 更 为 恰当 。 ECMAScript 语法 规范 中 对 于 条 件 运算 符 表 达 式 的 具体 定义 如 下 : 


variable = boolean expression ? true value : false Value， 


如 何 理解 上 面 这 段 关 于 条 件 运 自 符 表达 式 的 定义 呢 ? 首先 ， 要 判断 布尔 表达 式 
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boolean expression 的 取 值 , 若 为 true, 则 将 true_ value 赋值 给 变量 variable, 若 为 false, 则 将 false_value 
赋值 给 变量 variable。 同 时 ， 对 于 条 件 运算 符 表 达 式 的 格式 要 严格 按照 上 面 的 书写 方式 。 
下 面 看 一 个 使 用 条 件 运算 符 表 达 式 的 代码 示例 〈 详 见 源 代 码 ch06 目录 中 的 ch06-es-operator- 
conditional.html 文件 ) 。 
【代码 6-32 】 


01 <script type="text/javascript"> 


02 Var es = "ECMAScript"; 

VS Var 9 = “javascript 

04 Var vReturn greater = (es > js) ? "ECMAScript" : "javascript"; 

05 console.log(' (es > js) ? "ECMAScript" : "javascript" = ' + VReturn greater); 
06 var vReturn less = (es < js) ? "ECMAScript" : "javascript"; 

07 console.log(' (es < js) ? "ECMAScript" : "javascript" = ' + vReturn less); 
08 Var VReturn true = (true) ? "ECMAScript" : "javascript"; 

09 console.log(' (true) ? "ECMAScript" : "javascript" = ' + VReturn true); 

10 var vReturn false = (false) ? "ECMAScript" :; "javascript"; 

bal Consolesiog( (false) ?7 CMRAocriDpt” aascriptc = bP vReturn Talse)s: 
12 var vReturn T= (1) ? ECMAScript : "javascript"; 

下 | Consoles lIogN( (1) 2 EGCGMASCPrIDE :Javageripe = vaheturn Ds 

14 var VReturn 0 = (0) ? "ECMAScript" : "javascript"; 

Ly econsoles Log(" OU “ECMAScript “Javasceript” = ”Ht VvReturn Ji 


0 </Script> 


关于 【代码 6-32】 的 分 析 如 下 : 

第 02 和 第 03 行 代码 定义 了 两 个 字符 串 变 量 es 和 js， 并 分 别 初始 化 赋值 为 "ECMAScript"' 和 
"Javascript"。 

第 04 行 代码 使 用 条 件 运 算 符 判 断 布尔 表达 式 es > js 的 结果 ， 为“ 真 ” 则 返回 字符 串 
"ECMAScript"， 否 则 返回 字符 串 "javascript"。 

同样 ， 第 06 行 代码 使 用 条 件 运 算 符 判断 布尔 表达 式 es < js 的 结果 ， 为 “ 真 ” 则 返回 学 符 串 
"ECMAScript"， 否 则 返回 字符 串 "javascript"。 

而 第 08 和 第 10 行 代码 中 ， 条 件 运算 符 的 布尔 表达 式 直接 为 true 和 false， 相 当 于 直接 确认 返 
回 第 一 个 或 第 二 个 返回 值 。 

同样 ， 第 12 和 第 14 行 代 码 中 ， 条 件 运 鼻 符 的 布尔 表达 式 直 接 为 1 和 0， 等 同 于 true 和 false。 

运行 页 面 ， 调 试 信 息 如 图 6.35 所 示 。 





Developer Tools - ECMAScript in 15-days - http://localhost:63342/Webstorr 


[a Inspector Console Debugger Style Editor Performance Memory Network Storage 团 " 园 目 愉 日 


闸 字 Filter output _| Persist Logs 
{es > js) ? "ecmascript" : "javascript" = javascript .es-operator-conditional .html:26:3 
(es < js) ? "ecmascript" : "javascript" = ecmascript .es-operator-conditional .html:28:3 


| (true) ?了 "ecmascript" : "javascript" = ecmascript "~e5-Operator-conditional ,html :30:3 
(false) ? "ecmascript" : "javascript" = javascript -<es-Operator-conditionat .html:32:3 
(1) ? "ecmascript"” : "javascript" = ecmascript “es5-0perator-conditional .html :34:3 
(6) ? "ecmascript" : "javascript" = javascript <es5-operator-conditionat .html :36:3 
i >| 


6.35 ECMAScript 条 件 运算 符 


如 图 6.35 所 示 ， 从 第 05 和 第 07 行 代 码 输 出 的 结果 来 看 ， 字 符 串 进行 比较 的 布尔 表达 式 如 果 
为 tue， 则 返回 第 一 个 返回 值 "ECMAScript"， 和 否则 返回 第 二 个 返回 值 "javascript"。 
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从 第 09 和 第 11 行 代码 输出 的 结果 来 看 ， 如 过 布尔 表达 式 直 接 定义 为 true, 则 返回 第 一 个 返回 
值 "ECMAScript"; 如 果 直 接 定 义 为 false， 则 返回 第 二 个 返回 值 "javascript"。 

同样 ， 从 第 13 和 第 15 行 代码 输出 的 结果 来 看 ， 如 果 布 尔 表达 式 直 接 定义 为 数值 1， 则 返回 第 
一 个 返回 值 "ECMAScript"; 如 果 直 接 定义 为 数值 0， 则 返回 第 二 个 返回 值 "javascript"。 


6.10 ”本 闹 小 结 


本 草 主 要 介绍 了 ECMAScript 语法 规范 中 关于 运算 符 和 表达 式 的 内 容 ， 有 具体 包括 加 性 运算 符 、 
乘 性 运算 人生、 一 元 运算 从 、 关 系 运 算 符 、 等 性 运算 人生、 位 运算 从、 逻辑 运算 从 、 峰 值 运 算 人 从、 条 件 
运算 从 及 表达 式 等 方面 的 内 容 , 并 通过 一 些 具 体 实例 进行 了 讲解 ,相信 读 者 掌握 了 本 间 介 绍 的 内 容 ， 
就 可 以 将 ECMAScript 脚本 语言 中 运算 和 从 应 用 到 具体 开发 实践 中 了 。 
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本 章 将 介绍 ECMAScript 语法 规范 中 关于 流程 控制 语句 的 内 容 。ECMAScript 流程 控制 语句 是 
脚本 编程 语言 中 的 核心 部 分 ， 主 要 包括 条 件 语句 、 选 择 语 句 、 循 环 迭 代 语 句 、 循 环 中 断 语 名 及 标签 
语句 等 。 


7.1 if 条 件 语句 


本 节 将 介绍 ECMAScript 语法 中 最 基本 的 让 条 件 语句 ， 它 是 使 用 频率 非常 高 的 流程 控制 语句 。 
让 条 件 语句 的 语法 形式 有 很 多 种 ， 尤 其 与 else 关键 字 配 合 起 来 使 用 ， 表 现形 式 更 为 多 样 。 


7.1.1 if 语句 


ECMAScript 语法 规范 中 定义 的 站 语句 是 最 基本 的 条 件 选择 语句 ， 相 当 于 “ 辱 ……. 则 .…...” 的 
条 件 选择 。 
关于 让 语句 的 语法 格式 如 下 : 


if (条 件 ) { 
仅 当 条 件 为 true 时 ， 执 行 此 处 代码 


} 
下 面 就 是 一 个 使 用 让 条 件 选 择 语 句 的 代码 示例 〈 详 见 源 代码 ch07 目录 中 的 ch07-es-if.html 文 
i 记 计 


【代码 7-1】 


01 <script type="text/javascript"> 
02 if(true) { 
JE Console.1log("if (true) {"); 


第 7 章 流程 控制 语句 


04 console.log(" Eo DELITE Epa > 

05 console. Log(t™} )e 

06 } 

由 了 ConSole .1og (7 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 "”) ， 
08 if (false) 

09 console.log("if (false) {"); 

10 console.log(" to print falsee ™]e 

Tl console。 Log("}"): 


T2000 /Gri 


关于 【代码 7-1】 的 分 析 如 下 : 

第 02 一 06 行 代码 是 第 一 个 让 语句 块 ， 主 要 是 通过 让 语句 判断 true 是 否 为 真 ， 如 果 为 “ 真 ” 则 
通过 第 03 一 05 行 代码 控制 输出 调试 信息 。 

第 08 一 11 行 代码 是 意图 模仿 第 02 一 06 行 代码 的 第 二 个 证 语句 块 ,主要 是 通过 证 语句 判断 false 
是 否 为 真 , 如 果 不 为 " 真 " 则 不 执行 第 09 一 11 行 代码 。 但 注意 到 第 08 一 11 行 代码 中 语句 块 没有 “{}” 
符号 ， 那 么 这 个 模仿 的 第 二 个 证 语句 块 会 不 会 和 第 一 个 让 语句 块 功能 完全 一 样 呢 ? 

运行 页 面 ， 使 用 调试 器 查看 控制 台 输 出 的 调试 信息 ， 效 果 如 图 7.1 所 示 。 第 02 一 06 行 代码 的 
第 一 个 让 语句 块 输出 的 内 容 是 符合 预期 的 ; 第 08 一 11 行 代 码 的 第 二 个 让 语句 块 输出 的 内 容 则 比 贸 
奇怪 , 原本 由 于 让 语句 判断 布尔 值 fasle 后 不 会 得 到 任何 输出 ,但 第 10 一 11 行 代码 的 内 容 却 输出 了 ， 
而 第 09 行 代 码 的 内 容 没 有 输出 。 这 是 由 于 第 二 个 让 语 句 块 没 有 “{}” 符 号 的 缘故 造成 的 ， 其 默认 
只 将 第 09 行 代码 认 作 站 语句 块 的 语句 体 ， 而 第 10 一 11 行 代码 不 是 其 语句 体 ， 因 此 这 两 行 代码 的 
内 容 也 就 得 到 了 输出 。 
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会 时 Filter output (| Persist Logs 
if(true) { ch07-es-if.html:24:4 

to print true. ch07-es-if.html:25:4 

} chO7-es-if.html:26:4 
--------------------------------- ch67-es-If.htmt:28;3 

to print false., ch07-es-if.html:31:4 

} ch07-es-if.html:32:4 

p> 


neronecaenecaeneceenecacnecaenecacnecacaecacaecaceecoceecaeaepacaecacaecectececaececaececaececteccReaecaeciceCCRERCRECCREECCECEECCRCECCRCCCRCECCECECCEECCEECCRCRICCRCICECCRCEEECEECEEREECECEECECECEECEECREEEEG 人 


图 7.1 让 语句 


7.1.2 if...else... 语 名 


ECMAScript 语法 规范 中 定义 的 “if...else...” 语 句 是 对 站 语句 的 增强 ， 相 当 于 “ 若 ... 则 ...， 否 
则 ...” 条 件 选 择 。 
关于 if...else... 语 句 的 语法 格式 如 下 : 


if (条 件 ) { 

仅 当 条 件 为 true 时 ， 执 行 此 处 代码 
} else { 

否则 执行 此 处 代码 
} 


下 面 是 一 段 使 用 让..else... 语 句 的 代码 示例 ( 详 见 源 代 码 ch07 目录 中 的 ch07-es-if-else.html 文件 ) 。 
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【代码 7-2 】 


01 
UZ 
03 
04 
U5 
06 
07 
08 
AU 
10 
1 
12 
3 
14 
3 
16 


<script type="text/javascript"> 


EUEEUSNS TH 
Console.log(nif (true) {"); 
console.log(" truer)s 
consolenlogt bn) 

} else { 
console.log ("else {"); 
console.log(" false"); 
console.log("}"); 

| 

ODS lol 

if (false) { 
console. log("if(truey ny 
Console.1og(" true"); 
consoles log (tp yy 

} else { 
console.log ("else {"); 
console.log(" false"); 
console.1og("}"); 

} 


<WScript> 


关于 【代码 7-2】 的 分 析 如 下 : 

第 02 一 10 行 代码 是 第 一 个 if...else... 语 句 块 ， 主 要 是 通过 让 语句 判断 true 是 否 为 真 ， 如 果 为 
“ 真 ” 则 执行 ff 语句 块 中 第 03 一 05 行 的 代码 并 在 控制 台 输 出 调试 信息 ， 否 则 执行 else 语句 块 内 的 
第 07 一 09 行 的 代码 并 在 控制 台 输 出 调试 信息 。 

第 12 一 20 行 代码 是 第 二 个 if...else... 语 句 块 ， 主 要 是 通过 下 语 句 判 断 false 是 否 为 真 ， 然 后 执 
行 让 和 else 语句 块 内 的 代码 。 

运行 页 面 ， 查 看 控制 台 输 出 的 调试 信息 ， 如 图 7.2 所 示 。 对 于 if...else... 条 件 选择 语句 ， 运 行 
中 只 能 执行 ff 语句 块 或 else 语 句 块 中 的 内 容 ,不 能 两 者 都 执行 , 也 不 能 都 不 执行 ,这 也 正 是 if...else... 
条 件 选 择 语句 的 特点 。 


fel 
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从 时 Filteroutput Persist Logs 
| if(true) { ch67-es-if-eLse.htmt:24:4 
true ch07-es-if-else.html:25:4 

} chO7-es-if-else.html:26:4 
~--------------------------------- ch67-es-if-eLse .htmt;I32;9 
else 1{ ch67-es-if-eLse .htmt;3814 
false chO7-es-if-else.html:39:4 

} ch07-es-if-else.html:40:4 


7.2 让...else... 语 句 


if...else if...else... 语 句 


ECMAScript 语法 规范 中 定义 的 if...else if...else... 语 句 是 条 件 选择 语句 的 最 完整 的 版 本 了 ， 相 
当 于 “如 果 ... 则 ...， 如 果 ... 则 ...， 否 则 ...” 条 件 选 择 ， 基 本 可 以 适用 于 编程 中 过 到 的 任何 场景 。 
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关于 if...else if...else... 语 句 的 语法 格式 如 下 : 





下 面 是 一 段 使 用 if...else if...else... 语 句 的 代码 示例 ( 详 见 源 代码 ch07 目录 中 的 ch07-es-if-else- 
ifhtml 文件 ) 。 
【代码 7-3】 





关于 【代码 7-3】 的 分 析 如 下 : 

这 段 代 码 主要 是 使 用 了 3 段 if...else if...else... 语 句 块 ， 分别 用 于 演示 站 语句 块 、else 话语 句 块 
和 else 语句 块 3 种 不 同 的 条 件 输出 。 

第 02 一 08 行 代码 是 第 一 个 if...else if...else... 语 句 块 ， 主 要 是 通过 证 语句 判断 true 是 否 为 真 ， 
如 果 为 “ 真 ” 则 执行 让 语句 块 中 第 03 行 的 代码 并 在 控制 台 输 出 调试 信息 ， 人 否则 执行 后 面 的 语句 。 

第 09 一 15 行 代码 是 第 二 个 if...else if..else... 语 句 块 ， 主 要 是 通过 证 语句 判断 false 是 和 否 为 真 ， 
如 果 不 为 “ 真 ” 则 继续 通过 else 让 语句 判断 true 是 否 为 真 ， 如 果 为 “ 真 ” 则 执行 else 让 语句 块 中 第 
12 行 的 代码 并 在 控制 台 输 出 调试 信息 ， 否 则 执行 后 面 的 语句 。 

第 16 一 22 行 代码 是 第 三 个 if...else if...else... 语 句 块 ， 主 要 是 通过 计 语 句 判断 false 是 否 为 真 。 
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如 果 不 为 “ 真 ”， 则 继续 通过 else 让 语句 判断 false 是 否 为 真 ; 如 果 为 “ 真 ”， 则 执行 else 语句 块 
中 第 21 行 的 代码 并 在 控制 台 输 出 调试 信息 。 

页 面 效果 如 图 7.3 所 示 。 对 于 if...else if...else... 条 件 选择 语句 , 运行 中 只 能 执行 让 语句 块 、else 
if 语 句 块 或 else 语句 块 中 的 内 容 ， 不 能 全 部 都 执行 ， 也 不 能 都 不 执行 ， 至 少 执行 一 个 语句 块 ， 这 也 
同样 是 if...else if...else... 条 件 选择 语句 的 特点 。 

男 外 ，else if 语 句 块 可 以 扩展 为 多 项 并 列 的 形式 ， 这 样 就 可 以 适用 于 绝 大 多 数 的 编程 场景 了 。 
当然 ， 如 果 并 列 项 太 多 ， 就 可 以 使 用 下 面 我 们 将 要 介绍 的 switch 条 件 选 择 语 句 。 


Developer Tools - ECMAScript in 15-days - http://ocathost: 





Ca Inspec Consr Debug', Style Ed Perform: Memc Netwr Stora 轩 " 轩 上 日 内 唱 可 


会 时 Filter output _j Persist Logs 
| 1 if chO7-es-if-else-if.html:24:4 
--------------------------------- ch97-es-if-eLse-if.htmt:30:9 
2 else if ch07-es-if-else-if.html:34:4 
--------------------------------- ch07-es-if-else-if.html:38:9 
3 else ch07-es-if-else-if.html:44:4 

S| 


日 
one 


7.3 if...else if...else... 语 名 


7.2” switch 条 件 语句 





本 节 将 介绍 ECMAScript 语法 规范 中 男 一 个 条 件 选择 语句 一 一 switch 语句 。 在 大 多 数 情 况 下 ， 
比如 选择 项 很 多 的 编程 场景 ，switch 条 件 选 择 语句 就 会 比 让 条 件 选择 语句 更 为 适用 。 

ECMAScript 语法 规范 中 定义 的 switch 语句 同样 是 一 种 条 件 选择 语句 ,主要 用 于 基于 不 同 的 条 
件 执行 不 同 的 操作 的 场景 。 

关于 switch 语句 的 语法 格式 如 下 : 


Switch(n) { 
case 1: 
执行 代码 块 1; 
break; 
Case 2: 
执行 代码 块 2; 
break; 
case n: 
执行 代码 块 n; 
break; 
default: 
与 case 1、 case 2、...、 case n 不 同时 要 执行 的 代码 ; 


| 

其 中 , n 是 用 于 选择 的 表达 式 ( 通 和 常 是 一 个 变量 ) 。 表 达 式 的 值 依次 与 结构 体 中 的 每 一 个 case 
值 进行 比较 , 如 果 存 在 匹配 的 case 项 , 则 执行 该 case 项 的 代码 块 ; 如 果 不 存 在 任何 一 个 匹配 的 case 
项 ， 则 执行 default 项 的 代码 块 。 另 外 ，case 项 与 case 项 之 间 通 过 break 来 间 隅 ，default 项 通常 
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在 全 部 case 项 之 后 。 
下 面 看 一 段 使 用 switch 语句 的 代码 示例 ( 详 见 源 代码 ch07 目录 中 的 ch07-es-switch.html 文件 )。 
【代码 7-4】 
01 <!-- 添加 文档 主体 内 容 --> 
02 ”前 端 编程 语言 菜单 :&nbsp; gnbsp; 


03 <select id="id-select-switch" onchange="on select change (this.value);"> 


04 <option value="ECMAScript">ECMAScript</option> 
05 <option value="JavaScript">JavaScript</option> 
06 <option value="TypeScript">TypeScript</option> 


07 </select> 

08 <div id="id-div-switch"> 

09 请 选择 您 喜欢 的 前 端 编程 语言 : 
ORGTT> 

11 <!-- 添加 文档 主体 内 容 --> 


12 <script type="text/javascript"> 


bs) var V div = document .getElementById("id-div-switch"); 

14 function on select change (value) { 

TS switch(value) { 

16 case "ECMAScript": 

区 | v_div.innerHTML = "您 选择 前 端 编程 语言 : " + value; 
18 break; 

19 case "JavaScript": 

20 v_div.innerHTML = "您 选择 前 端 编程 语言 : " + value; 
Fa break; 

22 case "TypeScript": 

23 v_div.innerHTML = "您 选择 前 端 编程 语言 : " + value; 
24 break; 

之 default: 

26 v_div.innerHTML = "您 选择 前 端 编程 语言 : "; 

wa break; 

28 } 

29 } 


DERWSCETD > 


关于 【代码 7-4】 的 分 析 如 下 : 
第 03 一 07 行 代码 通过 <select> 标 签 定 义 了 一 个 下 拉 选 择 框 控件 ,并 添加 了 3 个 <option> 选 择 项 。 
其 中 ， 第 03 行 代码 中 为 该 标签 定义 了 “id” 属 性 ， 并 定义 了 “onchange ”事件 处 理 函 数 方 法 
(on select change(this.value)) ， 参 数 “this.value” 代 表 <select> 标 签 的 选中 值 。 有 关于 JavaScript 
事件 处 理 的 内 容 ， 我 们 会 在 后 续 间 节 中 详细 介绍 ， 此 处 只 需要 知道 “onchange” 事 件 是 用 户 操 作 
<selec 亿 标签 后 被 触发 的 就 可 以 了 。 
第 09 一 11 行 代码 通过 <div> 标 签 定义 了 一 个 层 , 用 于 显示 用 户 操作 <selec 人 标签 结果 的 返回 值 。 
第 12 一 30 行 代 码 通过 <script> 标 签 定义 了 一 段 骨 入 式 JavaScript 脚本 。 
第 13 行 代码 通过 document.getElementById() 方 法 获取 了 第 08 一 10 行 代 码 定义 的 <div> 标 签 的 
“id” 值 。 
第 14 一 29 行 代码 定义 了 第 03 行 代码 中 的 “onchange ”事件 处 理 函 数 (on _ select change(value) )， 
参数 “value” 为 传递 过 来 的 <selec 他 标签 的 选中 值 。 
第 15 一 28 行 代 码 通过 switch 语句 对 参数 “value” 进 行 了 选择 判断 ， 其 中 每 个 case 语句 定义 
了 根据 不 同 选择 所 执行 的 代码 ， 主 要 是 通过 “innerHTML ”属性 将 用 户 的 操作 结果 显示 到 第 09 一 
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11 行 代码 定义 的 <div> 标 签 中 。 
页 和 面 初始 效果 如 图 7.4 所 示 。 单 击 下 拉 菜 单 后 任意 选择 一 项 , 操作 后 的 页 和 面 效果 如 图 7.5 和 7.6 
所 示 。 


ECMAScript in 15-days - Mozilla Firefox 


ECMAScript in 15-days - Mozilla Firefox 


ECMAScriptin15-days Xx 





ECMAScriptin15-days x 









QC | localhost:63342 wo。 人 六》 三 G | © localhost:63342 “加 六》 三 
ECMAScript - 流程 控制 语句 - Switch ECMAScript - 流程 控制 语句 - Switch 
前 端 编程 语言 菜单 : ECMAScript ~ 前 端 编程 语言 菜单 : ECMAScript ~v 
ECMAScCript 
< JavaScript 
下 拉 菜 单 ER 下 拉 菜 单 选中 项 
请 选择 您 喜欢 的 前 端 编程 语言 : 请 选择 您 喜欢 的 前 端 气 
x De 
图 7.4 ”switch 语句 (1) 图 7.5 ”switch 语句 (2) 


ECMAScript in 15-days - Mozilla Firefox 





图 ECMAScriptin15-days Xx Ws 


CQ | © localhost:63342 加 站》 


ECMAScript - 流程 控制 语句 - Switch 


前 端 编 程 语言 菜单 : | ECMAScript ~ 


4 下 拉 菜 单 选中 项 


您 选择 前 端 编程 语言 :ECMAScript 





7.6 switch 语句 (3) 


7.3 ”循环 达 代 语句 


本 节 将 介绍 ECMAScript 语法 规范 中 的 循环 迭代 语句 。 循 环 语句 和 迭代 语句 其 实 是 一 个 意思 ， 
就 是 声明 一 组 要 反复 执行 的 命令 , 直到 满足 某 些 条 件 为 止 。 由 于 循环 条 件 通常 为 用 于 迭代 的 值 或 是 
执行 重复 的 算术 任务 ， 因 此 命名 为 循环 和 迭 代 语 句 。 

ECMAScript 语法 规范 中 定义 的 循环 友 代 语句 与 其 他 高 级 编程 语言 《如 C 语言 、Java 语言 等 ) 
类 似 ， 具 体 包括 for 语句 、while 语句 、do...while... 语 句 、for...in... 语 句 及 中 断 语 句 等 ， 下 面 我 们 
将 逐一 介绍 。 


7.3.1 for 语句 


ECMAScript 语法 规范 中 定义 的 for 语句 是 循环 语句 ， 主 要 用 于 一 次 次 的 循环 重复 执行 相同 的 
代码 ， 且 每 次 执行 代码 时 的 目 变 量 参数 会 按照 规律 递增 或 递减 。 
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关于 for 语句 的 语法 格式 如 下 : 

for (语句 1; 语句 2; 语句 3) { 
被 执行 的 代码 块 

} 

其 中 ,语句 1 是 在 循环 〈 代 码 块 ) 开始 前 执行 ， 一 般 用 于 定义 目 变 量 参数 初始 条 件 ; 语句 2 
定义 运行 循环 (代码 块 ) 的 条 件 ， 一 般 用 于 定义 目 变 量 参数 结束 条 件 ; 语句 3 在 循环 〈 代 码 块 ) 已 
被 执行 之 后 执行 ， 一 般 用 于 定义 目 变 量变 化 规律 。 

下 面 是 一 段 使 用 for 语句 的 代码 示例 〈 详 见 源 代码 ch07 目录 中 的 ch07-es-forhtml 文件 ) 。 

【代码 7-5】 

01 <script type="text/javascript"> 

02 forl(var i=1; i<=3; i++) { 

,EI consoles log ("i=" 9 4): 

Oa 

0S /he sl os 

关于 【代码 7-5】 的 分 析 如 下 : 

第 02 一 04 行 代码 通过 for 语句 定义 了 一 个 循环 体 。 其 中 ， 第 02 行 代码 定义 了 for 语句 的 循环 
初始 条 件 (var 二 1;) 、 循 环 结束 条 件 (i<=3;〉 及 目 变 量 的 变化 规律 〈i++) 。 该 for 循环 相当 于 循 
环 执行 了 3 次 第 03 行 代码 定义 的 控制 台 调 试 信息 输出 功能 。 

页 面 效 果 如 图 7.7 所 示 。 

如 果 将 for 语句 秽 套 起 来 使 用 ， 就 可 以 实现 很 多 既 复 杂 又 有 趣 的 功能 ， 如 九 九 乘法 表 的 打印 。 
下 面 就 介绍 一 下 如 何 使 用 for 语句 实现 打印 九 九 乘法 表 的 代码 示例 〈 详 见 源 代码 ch07 目录 中 的 
ch07-es-for-9x9.html 文件 ) 。 


Develtoper Toolts - ECMAScript in 15-days - h 


攻 Inspe Cons Deb' Style Perf Mem Net” 回回 日 宗 日 口 


曾 时 Filteroutput _| Persist Logs 
i= 1 chO7-es-for,.html :24:;4 
i= 2 ch67-es-for.htmt:24:4 
i= 3 chO7-es-for.html :24:4 
> z 
图 7.7 for 语句 
【代码 7-6】 
01 <script type="text/javascript"> 
02 for (Var i=]; i<=9; i++) { 
03 GE Te 是 人 
04 for (var j=1; j<=i; j++) { 
由 人 
06 } 
07 console.log(v line); 
08 } 


U9 </secript> 


关于 【代码 7-6】 的 分 析 如 下 : 
这 段 代 码 主要 就 是 通过 榜 套 使 用 for 循环 语句 〈 双 层 for 循环 ) 来 实现 九 九 乘法 表 的 打印 。 
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第 02 一 08 行 代码 通过 for 语句 定义 了 第 一 层 循环 体 《 或 称 外 层 循环 体 ) 。 其 中 ， 目 变量 定义 
为 “i”， 循 环 次 数 是 9。 

第 04 一 06 行 代码 通过 for 语句 定义 了 第 二 层 循环 体 ( 或 称 内 层 循 环 体 ) 。 其 中 ， 目 变量 定义 
为 “j”， 循 环 次 数 是 依据 变量 i 的 取 值 定义 的 ;， 第 05 行 代码 用 于 保存 九 九 乘法 表 的 每 一 行 。 

第 07 行 代码 通过 调试 信息 在 控制 台 和 输出 九 九 乘法 表 。 

页 面 效 果 如 图 7.8 所 示 。 





Developer Tools - ECMAScript in 15-days - http://localhost:63342/Webstorm 


中 Inspector Console Debugger Style Editor Performance Memory Network Storage 加 7- 园 日 宗 日 加 


人 曾 时 Filter output [| Persist Logs 
1x1=]1 chQ7-es-for-9x9.html:28:4 
1x2=2 2x2=4 chO7-es-for-9x9.html:28:4 

| JIx3=3 2x3=6 3x3=9 chO7-es-for-9x9.html:28:4 
1x4=4 2x4=8 3x4=12 4x4=]16 chO7-es-for-9x9.html:28:4 
JIx5=5 2x5=16 3x5=15 4x5=28 5x5=25 ch97-es-for-9x9.htm1L:28:4 
lx6=6 2x6=12 3x6=18 4x6=24 5x6=396 6x6=36 chO7-es-for-9x9.html:28:4 
1x7=7 2x7=14 3x7=21 4x7=28 5x7=35 6x7=42 7x7=49 ch@7-es-for-9x9.html:28:4 


1x8=8 2x8=]6 3x8=24 4x8=32 5x8=40 6x8=48 7x8=56 8x8=64 chO7-es-for-9x9.html:28:4 
1x9=9 2x9=18 3x9=27 4x9=36 5x9=45 6x9=54 7x9=63 8x9=72 9x9=81 ch87-es-for-9x9.html:28:4 


-Oe 


7.8 ”for 语句 实现 九 九 乘法 表 输 出 


7.3.2 ”for...in... 语 名 


在 ECMAScript 语法 规范 中 ,在 for 语句 的 基础 上 又 定义 了 一 个 for...in... 和 迭代 语 句 ，for...in... 
语句 是 更 严格 的 旬 代 语句 ， 主 要 用 于 枚 举 对 象 集合 中 的 属性 。 
关于 for...in... 碗 代 语句 的 语法 格式 如 下 : 


For (Beop Tn eollection) | 


被 执行 的 代码 块 
} 
其 中 ，prop 用 于 表示 属性 的 变量 ，collection 用 于 表示 属性 的 集合 。 
下 面 是 一 段 使 用 for...in... 语 句 的 代码 示例 ( 详 见 源 代码 ch07 目录 中 的 ch07-es-for-in.html 文 
件 ) 。 
【代码 7-7】 


01 <script type="text/javascript"> 


02 Var arr = new Array(); 

03 for (var i=1; i<=3; i++) { 

04 arr[i] = i; 

05 } 

06 var 1: 

07 Eco 人 ns 

08 ECGnSDLGAIOGIU = mr 
09 } 


TOM Me > 


关于 【代码 7-7】 的 分 析 如 下 : 
第 02 行 代码 定义 了 一 个 数组 变量 arr， 并 通过 第 03 一 05 行 代码 中 for 语句 进行 了 初始 化 赋值 
(数字 1 一 3) 。 
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第 06 行 代码 定义 了 一 个 变量 j， 用 于 for...in... 语 句 中 的 变量 。 

第 07 一 09 行 代码 中 通过 for...in... 语 名 迭代 了 数组 变量 arr 中 每 一 个 属性 ,注意 for...in... 语 句 
的 书写 方法 for( in arr)。 

页 面 效 果 如 图 7.9 所 示 。 


Developer Tools - ECMAScript in 15-days - http:/ /lo 
避 Inspe Cons Debu Style E Perforr Mem Netvy Stor: 轩 " 园 目 内 日 可 





价 时 Filter output | | Persist Logs 
dm "a ch@7-es-for-in.html:29:4 
j=2 chQ7-es-for-in.html:29:4 
j= 3 ch07-es-for-in.html:29:4 

Sl 


7.9 ”for...in... 语 句 


如 前 文 所 述 ，for...in... 语 句 主 要 用 来 迄 代 对 象 中 的 属性 ， 下 和 面 是 一 段 使 用 for...in... 语 句 和 迭代 
window 对 象 中 属性 的 代码 示例 ( 详 见 源 代码 ch07 目录 中 的 ch07-es-for-in-window.html 文件 ) 。 
【代码 7-8】 


01 <script type="text/javascript"> 


02 Var wProp; 

O03 for (wProp in window) { 

04 console.log("ob] in window = " + wProp); 
05 } 


06 </seript> 


关于 【代码 7-8】 的 分 析 如 下 : 

第 02 行 代 码 定义 了 一 个 变量 wProp， 用 于 for...in... 语 句 中 的 变量 。 

第 03 一 05 行 代 码 中 通过 for...ipn... 语 名 迭代 了 window 对 象 中 的 属性 (for(wProp in window) ) ， 
并 在 控制 台中 进行 了 输出 。 

页 面 效果 如 图 7.10 所 示 。 在 浏览 器 控制 台中 输出 了 window 对 象 中 的 一 部 分 属性 〈window 对 
象 中 有 很 多 属性 ) ， 读 者 看 看 这 一 小 部 分 属性 名 是 不 是 觉得 很 熟悉 的 呢 ? 


Developer Tools - ECMAScript in 15-days - http://localhost:63342/We 





Ca Inspectc Consol Debugge Style Editc PerForman' Memor Networ Storag' 轩 " 轩 日 窗口 了 可 


曾 时 Filter output [| Persist Logs 
obj in window = close ch97-es-for-in-window.htmt:25:4 
obj in window = stop chO7-es-for-in-window.html:25:4 
obj in window = focus chO7-es-for-in-window.html:25:4 
obj in window = blur ch07-es-for-in-window.html :25:4 

| obj in window = open chO7-es-for-in-window.html :25:4 
obj in window = alert ch97-es-for-in-window.htmt:25:4 
obj in window = confirm chO7-es-for-in-window.html:25:4 
obj in window = prompt chO7-es-for-in-window.html:25:4 
obj in window = print ch07-es-for-in-window.html :25:4 
obj in window = postMessage ch97-es-for-in-window.htmt:25:4 
obj in window = captureEvents ch97-es-for-in-window.htmt:25;4 
obj in window = releaseEvents ch67-es-for-tin-window.htmt:25:4 
obj in window = getSelection chO7-es-for-in-window.html :25:4 


ee ee te et ett et et et et tt en et et te 


7.10 for...in... 语 句 迭 代 window 对 象 属性 
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7.3.3 ”while 语句 


在 ECMAScript 语法 规范 中 还 定义 了 一 个 while 循环 友 代 语句 。 在 前 文中 介绍 的 for 语句 用 于 
定义 有 人 穷 循 环 语 句 ， 而 while 语句 则 用 来 定义 无 穷 循 环 语句 (需要 有 循环 结束 条 件 的 )。 

关于 while 语句 的 语法 格式 如 下 : 

while (条 件 ) { 

被 执行 的 代码 块 

} 

其 中 ， 当 判断 “条 件 ” 为 真 时 则 无 限 次 执行 循环 体内 的 代码 ， 只 有 当 判 断 “ 条 件 ” 为 假 时 才 
停止 循环 ， 因 此 while 是 一 种 前 测试 循环 语句 。 

下 面 是 一 段 使 用 while 语句 来 实现 的 代码 示例 〈 详 见 源 代 码 ch07 目录 中 的 ch07-es-while.html 
文件 ) ， 这 段 代码 是 将 【代码 7-5】 中 的 for 语句 通过 while 语句 改写 而 成 。 

【代码 7-9】 

01 <script type="text/javascript"> 


02 Var i = 1;} 
03 while(i <= 3) { 


04 console. log (Mia=" 1)s 
05 + 二， 
06 


了 hey out) on es 


关于 【代码 7-9】 的 分 析 如 下 : 

第 02 行 代码 定义 了 一 个 变量 i， 并 进行 了 初始 化 操作 二 1。 

第 03 一 06 行 代码 通过 while 语句 定义 了 一 个 循环 体 。 其 中 ， 第 03 行 代码 通过 while 语句 判断 
变量 i 的 值 是 否 小 于 等 于 数值 3， 铬 条 件 为 “ 真 ” 则 执行 第 04 和 第 05 行 代码 定义 的 循环 体 ， 且 第 
05 行 代码 执行 变量 i 的 目 动 累加 。 

当 第 05 行 代码 被 执行 后 ， 变 量 i 的 累加 值 大 于 数值 3 时 ， 第 03 行 代码 的 判断 条 件 为 “ 假 ”， 
从 而 结束 第 03 一 06 行 代码 定义 的 while 循环 体 。 

页 面 效果 如 图 7.11 所 示 。 

Developer Tools - ECMAScript in 15-days - http: 
避 Inspe Cons Deb' Style Perfo Mem Nety Stor: 加 =- 园 上 日 宗 日 口 


人 曾 时 Filter output | Persist Logs 
i= 1 chO7-es-while.html:25:4 
i= 2 chO7-es-while.html:25:4 
i= 3 chO7-es-while.html:25:4 

i >| 


7.11 ” while 语句 


7.3.4 do...while 语句 


前 文中 介绍 的 while 语句 是 前 测试 循环 语句 ,与 之 对 应 的 则 是 do.…while 后 测试 循环 语句 ， 即 退出 
条 件 在 执行 循环 内 部 的 代码 之 后 计算 ， 也 就 是 表示 在 判断 测试 条 件 之 前 ， 人 至 少 会 执行 循环 主体 一 次 。 
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关于 do...while 语句 的 语法 格式 如 下 : 
do 
被 执行 的 代码 块 

} while (条 件 ) ; 

其 中 ， 当 判断 “条 件 ” 为 真 时 则 无 限 次 执行 循环 体内 的 代码 ， 只 有 当 判 断 “ 条 件 ” 为 假 时 才 
停止 循环 。 

下 面 是 一 段 使 用 do...while 语句 来 实现 的 代码 示例 〈 详 见 源 代码 ch07 目录 中 的 ch07-es-do- 
while.html 文件 ) 。 

【代码 7-10】 

01 <script type="text/javascript"> 

O02 "vari= 1; 


03 ao 
04 console.log ("i=", i); 
Qs i++? 


06 } while(i <= 3); 

UO/acript> 

关于 【代码 7-10】 的 分 析 如 下 : 

第 02 行 代码 定义 了 一 个 变量 i， 并 进行 了 初始 化 操作 二 1。 

第 03 一 06 行 代 码 通过 do...while 语句 定义 了 一 个 循环 体 。 其 中 ， 第 03 行 代码 中 使 用 do 语句 
先 执行 循环 体 ;第 05 行 代码 执行 变量 i 的 自动 累加 ; 第 06 行 代码 通过 while 语句 判断 变量 i 的 值 
是 否 小 等 于 数值 3， 如 果 条 件 为 “ 真 ” 则 执行 第 04 一 05 行 代码 定义 的 循环 体 。 

当 第 05 行 代码 被 执行 后 ， 变 量 i 的 累加 值 大 于 数值 3 时 ， 第 03 行 代码 的 判断 条 件 为 “ 假 ”， 
从 而 跳出 第 03 一 06 行 代码 定义 的 while 循环 体 。 

页 面 效果 如 图 7.12 所 示 。 


Developer Tools - ECMAScript in 15-days - http://localh 





[a Inspec Cons Debuc Style Ec Perform Mem Netw Storz 回 * 园 日 次 日 上 口 


兽 是 Filter output [_ | Persist Logs 
i= 1 chO7-es-do-while.html:25:4 
i= 2 ch07-es-do-while.html :25:4 
i= 3 ch07-es-do-while.html:25:4 
i S| 


eonnensenenneenensensenennenensensnnnneenenennsnnneennnnnnnnenennnenenennennmenennnennnnenn0nnnnnnnnnenennnnnnnnnennnnnnenennnnnennnnnnennnenennnnnee, 


7.12 do...while 语句 


7.4 循环 中 晰 语句 


本 节 将 介绍 ECMAScript 语法 规范 中 的 循环 中 断 语句 。 所 谓 循环 中 断 语 句 ， 就 是 终止 循环 语 铝 
继续 执行 的 语句 。 在 ECMAScript 语法 规范 中 定义 的 循环 中 断 语 句 主 要 是 指 break 语句 和 continue 
语句 ， 使 用 循环 中 断 语 句 可 以 对 循环 中 的 代码 执行 提供 更 严格 的 控制 。 


Led 


ECMAScript 从 零 开 始 学 ( 视频 教学 版 ) 


7.4.1 break 语句 


ECMAScript 语法 规范 中 提供 了 一 个 break 语句 ， 用 来 实现 根据 指定 条 件 结束 循环 体 的 功能 。 
具体 来 说 就 是 break 语句 可 以 实现 跳出 循环 体 的 功能 ， 且 跳出 循环 体 后 不 影响 后 续 代 码 的 执行 〈 如 
果 有 后 续 代 人 码 的 话 〉。 

关于 break 语句 的 语法 格式 如 下 : 

循环 体 { 


break; 
} 


下 面 是 一 段 使 用 break 语句 终止 循环 体 的 代码 示例 ( 详 见 源 代 人 码 ch07 目录 中 的 ch07-es- 
break.html 文件 ) 。 
【代码 7-11 】 


01 <script type="text/javascript"> 
02 for (var 1=1; i<=6; i++) f{ 


号 EM 

04 break; 

5 consolee log (i=" 1) 
UG 0 


OI/aeript> 


关于 【代码 7-11】 的 分 析 如 下 : 

这 段 代码 主要 就 是 对 for 语句 循环 体 设 定 了 提前 结束 循环 的 条 件 , 具体 是 通过 第 03 和 第 04 行 
代码 定义 的 证 语句 ， 判 断 自 变量 i 是否 大 于 数值 S， 若 条 件 为 真 ， 则 执行 第 04 行 代码 定义 的 break 
语句 终止 循环 。 

页 面 效 果 如 图 7.13 所 示 。 


Developer Tools - ECMAScript in 15-days - http:// 
[a Inspe Cons Debu Stylet Perfor Mem Netv Stor: 轩 " 园 目 窗 口 了 可 





闪 时 Filteroutput | Persist Logs 
i= 1 ch07-es-break.html :26:4 
i= 2 ch07-es-break.html :26:4 
i= 3 ch07-es-break.html :26:4 
i= 4# ch07-es-break.html :26:4 
i= 5 ch07-es-break.html :26:4 

>| 


Bsnsnsnsnnnennensn nestorntn natn NAAR 


7.13 ”break 语句 


7.4.2 ”continue 语句 


虽然 break 语句 功能 强大 ,但 也 有 其 局 限 性 ， 因 为 中 断 循 环 后 后 续 的 循环 也 会 随 之 被 终止 。 如 
果 想 仅仅 中 断 一 次 循环 该 如 何 操作 呢 ? 

在 ECMAScript 语法 规范 中 提供 了 一 个 continue 语句 ， 用 于 中 断 循 环 体 中 的 一 次 迄 代 。 具 体 来 讲 ， 
就 是 在 一 次 循环 中 即使 满足 了 中 断 的 条 件 ， 也 仅仅 是 结束 本 次 循环 ， 不 影 啊 循 环 体 继续 后 续 的 友 代 。 
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关于 continue 语句 的 语法 格式 如 下 : 
循环 体 { 


continue; 


1 
下 面 是 一 段 使 用 continue 语句 终止 循环 体 的 代码 示例 〈 详 见 源 代 码 ch07 目录 中 的 
ch07-es-continue.html 文件 ) 。 
【代码 7-12】 


01 <script type="text/javascript"> 


02 for (Var i=]; i<=9; i++) { 

DE if((i == 1) || (i == 4) || (i == 7)) 
04 continue; 

Q5 console.log ("i=", 14); 

06 lL 


人 es ae 


关于 【代码 7-12】 的 分 析 如 下 : 

这 段 代 码 主要 就 是 对 for 语句 循环 体 设 定 了 终止 本 次 循环 的 条 件 。 第 03 和 第 04 行 代码 定义 了 
一 个 让 语句 ,判断 目 变 量 i 是 否 等 于 数值 1.4 和 7, 者 条 件 为 真 , 则 执行 第 04 行 代码 定义 的 continue 
语句 中 断 本 次 循环 。 

页 面 效 果 如 图 7.14 所 示 。 当 循环 执行 到 自 变 量 为 1、4 和 7 时 被 中 断 了 ， 第 05 行 代码 定义 的 
调试 信息 输出 没有 被 执行 ， 而 从 显示 的 结果 来 看 ， 其 他 数值 均 在 控制 台 得 到 了 有 效 的 打印 输出 。 


Developer Tools AA 


a Inspec Cons Debuc Style Ec Perform Mem Netw Storz 田 " 轩 上 目 崔 日 可 


闸 时 Filter output _] Persist Logs 
i= 2 ch07-es-continue,html :26:4 
| i 3 chO7-es-continue.html :26:4 
i= 5 chO7-es-continue.html:26:4 
i= 6€ chO7-es-continue.html :26:4 
i= 8 ch0O7-es-continue.html :26:4 
i= 9 ch0O7-es-continue,.html:26:4 
EN NS I AE OE Ue ES EE a LATE ee sce We 
>| 


图 7.14 continue 语句 


7.4.3 ”break 语句 与 标签 语句 配合 使 用 


在 ECMAScript 语法 规范 中 还 提供 了 一 个 标签 语句 ， 可 以 与 中 断 语句 配合 使 用 , 用 以 返回 到 代 
码 中 的 特定 位 置 。 
下 面 是 一 段 break 语句 与 标签 语句 配合 使 用 的 代码 示例 〈 详 见 源 代 码 ch07 目录 中 的 
ch07-es-break-label.html 文件 ) 。 
【代码 7-13 】 


01 <script type="text/javascript"> 


JE label: 

03 for (var i=1l; i<=9; i++) { 

04 Var Vv line = ""} 

05 for (var j=1; j<=i; j++) { 
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06 if((i>6) && (j>6)) 

07 break label; 

08 pe bg {~ pg rt do nT a i 
09 } 

1 0 console.log(v line); 

11 } 


T1200 /Cript> 


关于 【代码 7-13】 的 分 析 如 下 : 

这 段 代码 其 实 是 对 【代码 7-6】 中 实现 的 9X9 乘法 表 进 行 了 改写 ， 目 的 就 是 想 提 前 结束 循环 ， 
即 当 乘法 表 打 印 到 第 6 行 时 强行 中 断 该 循环 体 。 

因此 ,第 02 行 代码 定义 了 一 个 标签 label; 第 06 和 第 07 行 代码 定义 了 一 个 让 语句 ， 判 断 自 变 
量 i 和 j 是 否 大 于 数值 6， 若 条 件 为 真 ， 则 执行 break 语句 (break label) 终止 循环 并 跳 转 到 标签 label 
处 。 

页 面 效 果 如 图 7.15 所 示 。 如 图 7.15 中 箭头 所 指 ， 当 循环 体 执行 到 第 6 行 时 ， 循 环 体 被 终止 执 
行 ， 说 明 第 07 行 代码 定义 的 break 语句 (break label) 起 到 了 作用 。 





Developer Tools - ECMAScript in 15-days - http://localhost:63 
Ca Inspect Consc Debugc Style Edi Performa Memo Netwc Storat 回 - 园 日 闪 日 口 


会 时 Filter output JPersist Logs 
1xl1=1 chO7-es-break-label .html:31:4 

| 1x2=2 2x2=4 ch07-es-break-label .html:31:4 
1x3=3 2x3=6 3x3=9 ch67-es-break-Labet .html :31;4 
1x4=4 2x4=8 3x4=]12 4x4=]16 ch07-es-break-label.html:3]1:4 
lx5=5 2x5=]10 3x5=15 4x5=20 5x5=25 ch07-es-break-label .html:31:4 


1x6=6 2x6=12 3x6=18 4x6=24 5S5x6=30 6x6=36 chO7-es-break-label .html:31:4 





7.15 break 语句 与 标签 语句 (1) 


如 果 和 仔细 研究 【代码 7-13】 会 发 现 ， 即 使 不 使 用 标签 语句 〈 仅 使 用 break 语句 ) ， 效 果 与 使 用 
标签 label 也 是 一 样 的 。 
下 面 是 一 段 真 正 发 挥 标签 语句 作用 的 代码 示例 〈 详 见 源 代 人 码 ch07 目录 中 的 ch07-es-break- 
label-spec.html 文件 ) 。 
【代码 7-14】 


01 <script type="text/javascript"> 


02 for(var 1I=1， i<=9; i++) { 

03 varyveline em nn 

04 label: 

05 fo (ae < JIT) | 

06 下 有 

QO break label; 

08 AI 
09 } 

了 console.log(v line); 

bl } 


T2090 /scelipt> 


关于 【代码 7-14】 的 分 析 如 下 : 
这 段 代码 是 对 【代码 7-13】 进 行 了 改写 , 目的 就 是 想 测试 一 下 标签 label 放 到 不 同位 置 的 效果 。 
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因此 ， 将 【代码 7-13】 中 第 02 行 代码 定义 的 标签 label 重新 放 到 了 【代码 7-14】 中 第 04 行 的 
位 置 ， 其 他 代码 没有 做 任何 改动 。 

页 面 效果 如 图 7.16 所 示 。9X9 乘法 表 的 第 7 一 9 列 打印 时 被 截断 了 ， 没 有 全 部 打印 出 来 。 但 
与 图 7.15 效果 不 同 的 是 ， 乘 法 表 打 印 到 第 6 行 后 没有 被 终止 ， 仍 是 继续 打印 出 了 第 7 一 9 行 的 乘法 
表 。 原 因 就 是 我 们 将 标签 label 的 位 置 改 到 了 代码 的 第 04 行 , 即 放 在 了 外 层 循 环 体内 部 、 内 层 循环 
体 的 外 部 。 这 样 当 break 语句 (break label) 被 执行 后 跳 转 到 第 04 行 的 标签 label 位 置 时 ， 仅 仅 是 
终止 了 内 层 循 环 体 ， 而 外 层 循环 体会 继续 执行 下 去 。 
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Ca Inspecto! Console Debuggel Style Edito Performanc Memory Networl Storage 轩 " 轩 上 日 容 日 可 


闸 时 Filteroutput Persist Logs 
lxl=]1 ch07-es-break-label.-.spec,. html:31:4 

| 1x2=2 2x2=4 chO7-es-break-label -spec,.html :31:4 
1x3=3 2x3=6 3x3=9 ch07-es-break-label-.spec.html :31:4 
1x4=4 2x4=8 3x4=12 4x4=16 chO7-es-break-label.-.spec,.html:31:4 
lx5=5 2x5=16 3x5=15 4x5=20 5x5=25 chO7-es-break-label-spec,.html:31:4 
1x6=6 2x6=12 3x6=18 4x6=24 Sx6=30 6x6=36 ch07-es-break-label -spec.html :31:4 
1x7=7 2x7=14 3x7=2]1] 4x7=28 Sx7=35 6x7=42 chO7-es-break-label.-.spec,html:31:4 
1x8=8 2x8=16 3x8=24 4x8=32 5x8=46 6x8=48 chO7-es-break-label-spec,.html :31:4 
1x9=9 2x9=18 3x9=27 4x9=36 Sx9=45 6x9=54 ch07-es-break-label-spec.html:31:4 


图 7.16 ”break 语句 与 标签 语句 (2) 


7.4.4 ”continue 语句 与 标签 语句 配合 使 用 


7.4.3 小 节 介 绍 了 break 语句 和 标签 语句 配合 使 用 的 效果 , 本 小 节 再 介绍 一 下 continue 语句 和 标 
签 语句 配合 使 用 。 
下 面 是 一 段 continue 语句 与 标签 语句 配合 使 用 的 代码 示例 〈( 详 见 源 代 人 码 ch07 目录 中 的 
ch07-es-continue-label.html 文件 ) 。 
【代码 7-15 】 


01 <script type="text/javascript"> 


,be label: 

03 for (Var i=1]; i<=9; i++) f{ 

04 Varsy line = mn 

05 forlvar Yael doaTe TI 

06 TEL>el Ee (1>0)) 

QO continue label; 

08 ER 
09 } 

10 console.log(v line); 

1 } 


T2000 SC 


关于 【代码 7-15】 的 分 析 如 下 : 

这 段 代 码 是 对 【代码 7-13】 中 实现 的 9X9 乘法 表 进 行 了 改写 ， 将 break 语句 换 成 了 continue 
语句 。 

页 面 效 果 如 图 7.17 所 示 。【 代 码 7-15】 中 使 用 continue 的 效果 与 【代码 7-13】 中 使 用 break 
的 效果 是 一 致 的 。 但 仔细 研究 一 下 会 发 现 ， 者 【代码 7-15】 中 不 使 用 标签 语句 ， 则 continue 语句 


Ts 
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会 使 得 外 层 循环 体 继 续 执 行 下 去 ， 这 也 正 是 标签 语句 label 起 到 了 终止 循环 体 的 作用 。 





Developer Tools - ECMAScript in 15-days - http://localhost:63342/Wet 
Ca Inspecto Consol Debugge Style Editc Performanc Memor Networ Storagt 轩 " 园 日 窗口 了 可 


从 字 Filter output (| Persist Logs 
1x1l=1 ch07-es-continue-label.html:31:4 
1x2=2 2x2=4 ch07-es-continue-label.html:31:4 
1x3=3 2x3=6 3x3=9 chO7-es-continue-label ,html :31:;4 
1x4=4 2x4=8 3x4=12 4x4=16 ch07-es-continue-label .html:31:4 
lx5=5 2x5=10 3x5=15 4x5=26 5x5=25 ch07-es-continue-label .htmt:31:4 
1x6=6 2x6=12 3x6=18 4x6=24 5x6=36 6x6=36 ch97-es-continue-LabeL .htmt:317;4 

加 E 


7.17 ”continue 语句 与 标签 语句 〈1) 


如 果 继 续 将 【代码 7-14】 中 的 break 语句 改写 成 continue 语句 呢 ? 


下 面 是 一 段 continue 语句 与 标签 语句 配合 的 代码 示例 〈 详 见 源 代码 


continue-label-spec.html 文件 ) 。 
【代码 7-16】 


01 
02 
03 
04 
05 
06 
Qn 
08 


<script type="text/jJavascript"> 
for(var i=1]; i<=9; i++) { 


} 
SCETPE> 


var Vv line = "";} 
label: 
for (var j=1; j<=i; j++) { 

EG 6) 

continue label; 

dn tm TE 
} 
console.log(v line); 


关于 【代码 7-16】 的 分 析 如 下 : 


这 段 代 码 是 对 【代码 7-15】 进 行 了 改写 , 目的 就 是 想 测试 一 下 标签 label 放 到 不 同位 置 的 效果 。 
因此 ， 将 【代码 7-15】 中 第 02 行 代码 定义 的 标签 label 重新 放 到 了 【代码 7-16】 中 第 04 行 的 


位 置 ， 其 他 代码 没有 做 任何 改动 。 


页 面 效果 如 图 7.18 所 示 。9X9 乘法 表 的 第 7 一 9 列 在 打印 时 同样 被 截断 了 ， 没 有 全 部 打印 出 


来 ， 这 与 图 7.16 的 效果 是 一 致 的 。 
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a Inspector Console Debugger Style Editor Performance Memory Network Storage 回 - 园 日 宗 日 加 


和 曾 守 Filteroutput _|Persist Logs 
1x1=]1 chd7-es-continue-label-spec.htnl:32:4 
1x2=2 2x2=4 chd7-es-continuye-label-spec.htnl :32:4 

| 1x3=3 2x3=6 3x3=9 chd7-es-continue-label-spec.htnl:32:4 
1x4=4 2x4=8 3x4=12 4x4=16 chd7-es-continue-label-spec.htnl:32:4 


1xS=S 2xS=18 3xs=15 AxS=28 SxS=25 chd7-es-continue-label -spec.htnl :32:4 
1x6-6 2x6-12 3x6-18 4x6-24 5S5x6-30 6x6-36 
1x7=7 2x7=14 Ix7-21 4x7-=28 5x7=35 6x7-42 
1xX6=6 ZXx6=156 jx6=24 4x6=32 5x6=40 6X6=480 


1x9=9 2x9=18 jx9=27 4x9=36 5x9=45 6x9=54 


chd7-es-continue-label-spec.htnl :32:4 
chd7-ecs-continuc-labcl-spec.htnl :32:4 
cho7-es-continuyue-1iabel-spec.Nntnl :32:4 
chd7-es-continue-label-spec.htnl:32:4 





S| 9x9 乘 法 委 在 垂下 方向 被 截断 


7.18 ”continue 语句 与 标签 语句 (2) 


ch07 目录 中 的 ch07-es- 


第 7 章 流程 控制 语句 


7.5 ”ECMAScript 6 新 特 新 一 一 for of 达 代 循环 


ECMAScript 6 语法 规范 中 新 定义 了 一 个 for of 循环 迭代 语句 ， 专 门 用 来 针对 可 返 代 的 
JavaScript 对 象 执行 迭代 操作 。 下 面 通过 几 个 简单 的 代码 实例 ， 介 绍 一 下 for of 循环 帮 代 语句 的 使 
用 方法 。 


7.5.1 和 迭代 数组 


for of 循环 迭代 语句 主要 用 于 迭代 数组 。 下 面 是 一 段 使 用 for of 循环 迭代 语句 和 迭代 数组 的 代码 
示例 〈 详 见 源 代码 ch07 目录 中 的 ch07-es-for-of-arr.html 文件 ) 。 


【代码 7-17】 

01 <script type="text/javascript"> 
02 Var arr = new Array(); 

03 Fore (le T= O00 1 < 3 3 
04 arr[i] = i; 

Us } 

06 For (tlet I oF rar 1 

07 console.log("j = " + j); 
08 } 


O90 < /scr 


关于 【代码 7-17】 的 分 析 如 下 : 
第 02 行 代 码 定义 了 一 个 数组 变量 arr， 并 通过 第 03 一 05 行 代码 中 for 语句 进行 了 初始 化 赋值 
(数字 0~3 ) 。 


第 06 一 08 行 代码 中 通过 for...of... 循 环 迭 代 语 句 对 数组 变量 arr 进行 了 迭代 操作 ， 并 将 结果 输 
出 到 浏览 器 控制 台中 。 
页 面 效 果 如 图 7.19 所 示 。 通 过 for...of... 循 环 迭 代 语 名 成功 对 数组 变量 arr 进行 了 迭代 操作 。 


Developer Tools - ECMAScript in 15-days - http://localhost:63: 
[a Inspect Consc Debugc Style Edi Performa Memo Netwoc Storat 轩 " 园 目 窗 日 可 





疝 时 Filter output _ | Persist Logs 

| j=0 ch@7-es-for-of-arr.html:28:13 
j=1 chg7-es-for-of-arr.html:28:13 
j=2 chO7-es-for-of-arr.html :28:13 
j= 3 chO7-es-for-of-arr.html :28:13 

>| | 


OO 


7.5.2 ”迭代 字符 串 


使 用 for of 循环 迭代 语句 另 一 个 常见 的 应 用 场景 就 是 友 代 字符 串 了 。 下 面 是 一 段 使 用 for of 循 
环 返 代 语 名 操作 字符 串 的 代码 示例 〈 详 见 源 代 码 ch07 目录 中 的 ch07-es-for-of-string.html 文件 ) 。 
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【代码 7-18】 

01 <script type="text/javascript"> 

02 Var str = new String("abcdef"); 

O03 console.log("--- for of ‘'abcde' ---"); 
04 For {let ooF Str) HT 

Us console.log(c); 

06 } 


Qe /seript> 


关于 【代码 7-18】 的 分 析 如 下 : 
第 02 行 代码 定义 了 一 个 字符 串 变 量 str， 并 初始 化 为 "abcdef"。 





第 04 一 06 行 代 码 中 通过 for...of... 御 Developer Tools - ECMAScript in 15-days - http://localhost:t 
环 迭 代 语 名 对 字符 串 变 量 Str 进行 了 和 旭 代 a Inspec Cons' Debugr Style Ed Perform: Memc Netwc Stora 园 - 园 日 浆 日 口 
操作 ， 并 将 结果 输出 到 浏览 器 控制 台中 。 | Persist Logs 
a es 四 --- for of 'abcdef' --- ~»-e5-for-of-string.html:24:9 
页 向 效 果 如 图 7.20 所 修 \ 本 通 过 | a “~e5-for-of-string.html :26:13 
b “ee5-for-of-string.html:26:13 
for...of ... 循 环 迭 代 语 句 成 功 对 宁 符 串 变 量 c “es-for-of-string.html:26:13 
_ 、 d “es-for-of-string.html :26:13 
进行 了 迭 代 操 作 ， 返回 结果 为 单个 字符 的 e “es-for-of-string.html :26:13 
f "es-for-of-string.html:26:13 


序列 。 人 | 


7.20 for...of .. 循 环 迭 代 语 句 操作 字符 串 
7.5.3 forof 循环 迭代 原理 


这 里 有 必要 再 简单 介绍 一 下 for of 循环 迭代 的 尺 理 ， 其 实 ECMAScript 6 语法 规范 中 新 定义 的 
for of 循环 迭代 语句 是 通过 友 代 器 Symbol.iterator 方法 来 实现 的 。 迭 代 器 Symbol.iterator 中 定义 了 一 
个 iterator.next() 方 法 ， 用 于 依次 融 历 迭代 对 象 中 的 每 一 个 值 ， 直 到 遍历 完成 才 会 退出 ， 而 for of 循 
环 运 代 语 句 就 是 通过 该 机 制 实现 了 循环 迭代 操作 。 感 兴趣 的 读者 可 以 阅读 一 下 官方 的 ECMAScript 
6 语法 规范 文档 。 

既然 for of 循环 帮 代 语句 是 通过 和 代 器 Symbol.iterator 方法 来 实现 的 ， 那 么 被 迭代 的 对 象 就 是 
有 要 求 的 ， 并 不 是 所 有 ECMAScript 定义 的 对 象 都 可 以 被 for of 语句 操作 。 可 被 for of 循环 迭代 语 
句 操作 的 对 象 主要 有 数组 、 字 符 串 、Set 对 象 和 Map 对 象 。 大 尝试 操作 其 他 类 型 的 对 象 ， 则 很 可 能 
会 抛 出 异常 。 


7.6 本草 小 结 


本 章 主 要 介绍 了 ECMAScript 语法 中 流程 控制 语句 的 内 容 ， 有 具体 包括 让 和 switch 条 件 选 择 语 
名 、for 和 while 循环 友 代 语句 、break 和 continue 循环 中 断 语 句 及 其 与 标签 语句 配合 使 用 等 ， 并 通 
过 一 些 具 体 实 例 进 行 了 讲解 。 相 信 读 者 掌握 了 本 和 草 介 绍 的 内 容 ， 就 可 以 使 用 ECMAScript 脚本 语 
言 进 行 功能 更 为 复杂 的 开发 实践 了 。 
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本 草 将 介绍 ECMAScript 语法 规范 中 关于 函数 的 内 容 ， 函 数 在 ECMAScript 语法 规范 中 属于 有 
一 定 难 度 的 知识 点 。 本 和 草 内 容 主 要 包括 图 数 定义 、 图 数 调 用 、 函 数 对 象 等 。 


8.1 ECMAScript 函数 基础 


站 先 介绍 一 下 计算 机 程序 设计 语言 中 关于 “函数 ”的 概念 。 所 谓 “ 函 数 ” 其 实 就 是 从 英文 单 
词 “function ”翻译 过 来 的 。 因 此 ， 绝 大 多 数 程序 设计 语言 中 的 函数 也 是 通过 “function ”关键 字 来 
定义 的 。 

销 数 的 功能 是 什么 昵 ? 简 单 来 说 ，“ 了 函数” 就 是 用 来 完成 特定 功能 的 程序 语句 集合 。 传 统 高 
级 程序 设计 语言 (如 C、C#、Java 等 ) 中 的 图 数 ， 一 般 都 是 通过 关键 字 声 明和 定义 ， 然 后 通过 调 
用 来 使 用 的 。 

而 对 于 将 函数 作为 一 个 参数 传 给 男 一 个 函数 ， 或 者 是 赋值 给 一 个 本 地 变量 ， 又 或 者 是 作为 返 
回 值 进行 返回 这 样 的 高 级 用 法 ， 都 需要 通过 函数 指针 (function pointer) 或 代理 (delegate ) 的 方式 
来 实现 。 

在 ECMAScript 语法 规范 中 ,函数 不 仅 可 以 像 传统 函数 的 使 用 方式 (声明 、 定义 和 调用 ) 一 样 ， 
还 可 以 像 简单 值 一 样 进行 赋值 、 传 递 参数 及 返回 值 的 操作 。 因 此 ，ECMAScript (JavaScript) 图 数 
也 被 称 为 “第 一 类 函数 (First-class Function ) ”。 进 一 步 来 说 ，ECMAScript (JavaScript) 函数 既 
实现 了 像 类 (Class) 的 构造 函数 一 样 的 作用 ， 又 是 一 个 Function 类 的 实例 〈instance) 。 
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8.2 ECMAScript 函数 声明 、 定 义 与 调用 


本 节 将 介绍 ECMAScript 函数 的 基本 使 用 方法 ， 有 具体 就 是 ECMAScript 函数 声明 、 定 义 与 调用 
等 方面 的 内 容 。 在 ECMAScript 语法 规范 中 ， 函 数 声 明 与 定义 的 方式 非常 灵活 ，ECMAScript 语法 
规范 为 设计 人 员 实 现 了 多 种 函数 声明 与 定义 的 方式 。 


8.2.1 传统 方式 定义 ECMAScript 函数 


这 里 先 介绍 传统 方式 下 如 何 声明 与 定义 ECMAScript 函数 。 传 统 方式 对 于 绝 大 多 数 的 高 级 程序 
设计 语言 都 是 通用 的 ， 有 具体 的 语法 格式 如 下 : 
function 函数 名 (参数 1， 参数 2，...) { 
// 函数 体内 定义 的 语句 
} 
下 面 是 一 个 使 用 这 种 声明 定义 方式 〈 无 图 数 参数 ) 的 代码 示例 〔( 详 见 源 代码 ch08 目录 中 的 
ch08-es-func-define-basic.html 文件 ) 。 


【代码 8-1 】 

01 <script type="text/javascript"> 

02 /A* 

03 * 定义 ECMAScript 函数 一 一 传统 方式 

04 EE 

05 function MessageBox() { 

06 alert ("传统 的 ECMAScript 函数 声明 与 定义 方式 (无 函数 参数 ) ") ; 
07 } 

08 MessageBox (); // 调用 ECMAScript 函数 


09 </script> 


关于 【代码 8-1】 的 分 析 如 下 : 
第 05 一 07 行 代码 通过 function 关键 字 声 明 
定义 了 了 函数， 函数 名 为 MessageBox()， 这 了 束 是 





ECMAScript in 15-days - Mozilla Firefox 





» ECMAScriptin 15-days Xx is 


传统 的 高 级 程序 语言 声明 定义 方式 。 其 中 ， 函 X | @ locathost63342/webstormpr  … 加 会 | » 三 
数 体 通过 大 括号 “他 ”来 定义 ， 第 06 行 代 码 为 
函数 体内 定义 的 语句 。 传统 的 ECMAScript 函 数 声明 与 定义 方式 

第 08 行 代码 直接 通过 函数 名 MessageBox() (无 函数 参数 ) 


的 方式 调用 函数 。 
页 面 效果 如 图 8.1 所 示 。【 代 码 8-1】 中 第 
05 一 07 行 代 码 定 义 的 函数 MessageBox() 被 成 功 
调用 了 ， 弹 出 一 个 信息 警告 框 。 Transferring data from localhost... 
下 面 继续 看 一 个 使 用 这 种 声明 定义 方式 
《市 参数 ) 的 代码 示例 ( 详 见 源 代码 ch08 目录 





pe 


8.1 传统 ECMAScript 函数 的 声明 与 定义 方式 (1) 
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中 的 ch08-es-func-define-basic-param.html 文件 ) 。 


【代码 8-2 】 

01 <script type="text/javascript"> 

02 /* 

03 * 定义 ECMAScript 函数 一 一 传统 方式 

04 wp 

05 function MessageBox (paraml, param2) { 

06 alerti(iparaml Fn" "Ft param2 Tiny 

07 } 

08 MessageBox ("Hello", "ECMAScript"); // 调用 ECMAScript 函数 


09m sceceipt> 


关于 【代码 8-2】 的 分 析 如 下 : 

第 05 一 07 行 代码 通过 function 关键 字 声 明定 义 了 函数 ,函数 名 为 MessageBox(param1, param2)， 
该 函数 定义 了 两 个 参数 paraml 和 param2。 

第 08 行 代码 直接 通过 函数 名 MessageBox("Hello", "ECMAScript") 调 用 函数 ， 注 意 传 递 的 两 个 
参数 值 "Hello" 和 "ECMAScript"。 

页 面 效 果 如 图 8.2 所 示 。 第 09 行 代码 调用 的 函数 MessageBox0 中 所 定义 的 两 个 参数 "Hello" 和 
"ECMAScript" 被 成 功 传递 了 。 





ECMAScript in 15-days - Mozilla Firefox 





* ECMAScriptin 15-days XxX Wl 


> XX |O localhost53342/Webstor *” 轩 全 三 


Hello ECMAScript! 





Read localhost 


加 x 
8.2 ”传统 ECMAScript 函数 的 声明 与 定义 方式 (2) 


8.2.2 ” ECMAScript 函数 表达 式 方式 


表达 式 是 高 级 语言 程序 设计 中 一 个 基本 的 概念 ， 可 能 没有 人 会 想到 将 函数 也 写成 表达 式 的 方 
式 . 不 过 ,在 ECMAScript 语法 规范 中 却 文 持 将 图 数 声 明定 义 为 表达 式 的 方式 ,这 也 正 是 ECMAScript 
脚本 语言 与 众 不 同 之 处 。ECMAScript 脚本 语言 之 所 以 有 函数 表达 式 的 概念 , 是 源 自 于 ECMAScript 
语法 规范 中 “一 切 均 是 对 象 ” 的 设计 理念 。 

关于 函数 表达 式 的 基本 语法 格式 如 下 : 

var 函数 名 = function (参数 1， 参数 2，...){ 


// 函数 体内 定义 的 语句 
}; 


其 中 ， 函 数 名 是 函数 声明 语句 必需 的 部 分 ， 其 用 途 就 如 同 变量 一 样 ， 后 面 定义 的 函数 对 象 会 
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赋值 给 这 个 变量 。 另 外 ，function 关键 字 后 面 的 图 数 名 是 可 选 的 ， 即 使 加 上 该 函数 名 也 不 是 前 面 传 
统 声明 定义 方式 中 的 图 数 名 了 ， 二 者 功能 完全 不 一 样 。 

下 面 是 一 个 使 用 ECMAScript 图 数 表达 式 方 式 的 代码 示例 〈 详 见 源 代 码 ch08 目录 中 的 
ch08-es-func-define-exp.html 文件 ) 。 


【代码 8-3 】 

01 <script type="text/javascript"> 

02 /* 

03 * 定义 ECMAScript 函数 一 一 函数 表达 式 

04 下 

05 Var VSum = function(nl, n2) { 

06 return nl + n2; // 返回 值 

07 下 > 

08 EnmscleioogroomnI3 6 "voum oOo: 


V9 </acript> 


关于 【代码 8-3】 的 分 析 如 下 : 

第 05 一 07 行 代码 通过 var 关键 字 定 义 了 一 个 变量 VvSum，, 同时 后 和 面 通过 function 关键 字 声 明定 
义 了 函数 (注意 没有 定义 函数 名 ) ， 这 就 是 使 用 函数 表达 式 定义 函数 的 方式 。 在 function 关键 字 内 
定义 了 两 个 参数 nl 和 n2， 用 作 两 个 运算 数 。 函 数 体 同样 通过 大 括号 “{}” 来 定义 。 第 06 行 代码 
为 函数 体内 定义 的 语句 ,通过 return 关键 字 返 回 两 个 参数 nl 和 n2 的 算术 和 ， 这 与 传统 声明 定义 函 
数 的 方法 基本 一 致 。 

第 08 行 代码 直接 通过 变量 名 vSum(3, 6) 调 用 函数 。 

运行 【代码 8-3】 所 定义 的 HTML 页面， 并 使 用 调试 器 得 看 控制 台 输 出 的 调试 信息 ， 页 面 效果 
如 图 8.3 所 示 。 调 用 ECMAScript 函数 表达 式 定义 的 函数 与 调用 传统 ECMAScript 声明 方式 定义 的 
图 数 在 用 法 上 略 有 不 同 〈 见 【代码 8-3】 中 第 08 行 代码 ) 。 


Developer Tools - ECMAScript in 15-days - http://locath 





Ca Inspec Cons Debuc Style Er Perform Mem Netw Storz 轩 " 园 上 日 窗口 了 可 


闸 时 Filteroutput [JPersistLogs 
vSum(3, 6) = 9 “func-define-exp.html :29:3 


Danemannsnenennannnnsnsnennnninnnninannnnnnanninannninnnn nan 


8.3 ECMAScript 函数 表达 式 方式 (1) 
那么 读者 可 能 会 有 疑问 了 ，ECMAScript 图 数 表 达 式 方式 的 图 数 名 呢 ? 为 了 解答 这 个 疑问 ， 下 
面 继续 看 一 个 使 用 图 数 表 达 式 方式 声明 图 数 的 代码 示例 〈 详 见 源 代 码 ch08 目录 中 的 
ch08-es-func-define-exp-fname.html 文件 ) ， 该 函数 带 有 函数 名 。 


【代码 8-4】 

01 <script type="text/javascript"> 

亿 /* 

03 * 定义 ECMAScript 函数 一 一 函数 表达 式 

04 */ 

05 Var VSum = function Sum(nl, n2) { 

06 return nl + n2; // 返回 值 

Um }s 

08 console.10g9 ("Sum(3, 6) = "+ Sum(3, 6)): 
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关于 【代码 8-4】 的 分 析 如 下 : 

第 05 一 07 行 代码 通过 var 关键 字 定 义 了 一 个 变量 VvSum, 同时 后 面 通过 function 关键 字 声 明定 
义 了 图 数 ， 注 意 这 里 添加 了 图 数 名 Sum。 

第 08 行 代码 直接 通过 函数 名 Sum(3, 6) 调 用 函数 。 

页 面 效果 如 图 8.4 所 示 。 页 和 面 并 没有 出 现 我 们 想 要 的 效果 ， 只 是 提示 了 函数 名 Sum 未 定义 ， 
也 就 是 说 【代码 8-4】 中 第 05 行 代码 定义 的 Sum 不 是 一 个 有 效 的 函数 名 。 根 据 ECMAScript 语法 
规范 的 定义 ， 函 数 表 达 式 只 能 通过 前 和 面 定义 的 变量 来 调用 。 
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从 是 Filteroutput [PersistLogs 
A ReferenceError: Sum is not defined [|Learn Morel .func-define-exp-fname.html:29:3 





8.4 ”ECMAScript 函数 表达 式 方式 (2) 


那么 ，【 代 码 8-4】 中 定义 的 图 数 名 Sum 到 底 是 什么 呢 ? 
为 了 解答 这 个 疑问 , 下 面 改 写 一 下 【代码 8-4】( 详 见 源 代 码 ch08 目录 中 的 ch08-es-func-define- 
exp-fname-is.html 文件 ) 。 


【代码 8-5】 

01 <script type="text/javascript"> 

02 /* 

03 * 定义 ECMAScript 函数 一 一 函数 表达 式 

04 pe 

Qs Var VSum = function Sum(nl, n2) { 

06 Sonsoles logl cecal Sum In Fume :Eb Sum 
07 return nl + n2; // 返回 值 

08 }; 

09 console. log("vSum(3, 6) = "+ voum(3, 6)) 7 
10 eonsole lo eall Sum ou of funees | SUN 


TO /cripk> 


关于 【代码 8-5】 的 分 析 如 下 : 

第 06 行 代码 使 用 console.log() 方 法 在 控制 台 输 出 Sum 名 称 ， 注 意 这 里 是 在 丸 数 体 的 内 部 。 

第 09 行 代码 直接 通过 函数 名 vSum(3, 6) 调 用 函数 ， 目 的 是 为 了 让 函数 表达 式 vSum 生效 ， 并 
执行 到 第 06 行 代码 。 

第 10 行 代码 再 次 使 用 console.log() 方 法 在 控制 台 输 出 Sum 名 称 , 注意 这 里 是 在 图 数 体 的 外 部 。 

页 面 效果 如 图 8.5 所 示 。 如 图 8.5 中 第 头 所 指 , 在 函数 体内 部 的 Sum 是 一 个 function 类 型 的 对 
象 ， 具 体 代 表 整 个 函数 的 代码 ， 而 函数 体外 部 调用 的 Sum 是 一 个 未 定义 的 名 称 。 
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Developer Tools - ECMAScript in 15-days - http://ocalhost:63342/WebstormpPr 





[Ca Inspector Console Debugger Style Editor Performance Memory Network Storage 团 " 园 目 崔 口 了 可 


商 时 Filter output | Persist Logs 
call Sum in func : function Sum(n}l, n2) 1 -func-define-exp-fname-is.html:27:2 
console.log("call Sum in func : " + Sum); 
return nl + n2; // 返回 值 De 在 芳 数 体内 部 打印 “Sum "加 数 名 
} 
vSum(3, 6) = 9 ~- func-define-exp-fname-is.html :30:5 
& ReferenceError: Sum is not defined [Learn More] -func-define-exp-fname-is.html:31:5 
er pe rete roe agate I 
> 在 阔 数 体外 部 打印 “Sum" 范 数 名 


8.5 ”ECMAScript 函数 表达 式 方 式 (3) 


8.2.3 ”Function 构造 方式 定义 ECMAScript 函数 


关于 通过 Function 构造 函数 方式 定义 ECMAScript 函数 ， 有 具体 语法 格式 如 下 : 
var 变量 名 = new Function(" 参 数 1"，" 参 数 2"，.. .，" 参 数 n"，" 函 数 体 ") ; 
其 中 ，Function 构造 函数 可 以 接收 任意 数量 的 参数 ， 最 后 一 个 参数 为 图 数 体 ， 前 面 的 参数 枚 举 
出 新 图 数 的 参数 。 
下 面 是 一 个 使 用 Function 构造 函数 方式 声明 定义 ECMAScript 函数 的 代码 示例 《〈 详 见 源 代码 
ch08 目录 中 的 ch08-es-func-define-Function.html 文件 ) 。 
【代码 8-6】 


01 <script type="text/javascript"> 


02 /* 

03 * 定义 ECMAScript 函数 一 一 Function 构造 函数 

04 */ 

05 var voUm = Ten FUunectiont ni "nn Sreturn nitnon)ys 
06 Sonsoles Loom( youm(3d GG = vo oy) 


Ue ed shes 


关于 【代码 8-6】 的 分 析 如 下 : 

第 05 行 代码 通过 var 关键 字 定 义 了 一 个 函数 变量 vSum, 同时 后 面 通过 new 操作 符 和 Function 
关键 字 声 明定 义 了 函数 ， 这 就 是 Function 构造 图 数 方式 声明 定义 ECMAScript 图 数 的 方法 。 

第 06 行 代码 直接 通过 函数 名 vSum(3, 6) 调 用 函数 。 

页 面 效 果 如 图 8.6 所 示 。 
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[a Inspectc Consol Debugge Style Edit Performan Memor Networ Storag 用" 园 目 内 日 可 


何 守 Filter OULDUL 二 Persist Logs 
VvSum(3, 6) = 9 “func-define-Function.html:27:3 


TT 


Eg 


8.6 ”Function 构造 函数 方式 


目前 , 通过 Function 构造 函数 方式 声明 定义 ECMAScript 函数 的 方法 不 是 很 常用 , 主要 是 因为 
该 方式 定义 的 函数 没有 被 马上 解释 (需要 到 运行 时 才 被 解释 ) ， 这 样 便 导 致 了 执行 性 能 的 降低 。 
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8.3 “ECMAScript 函数 返回 值 


本 节 将 介绍 ECMAScript 函数 返回 值 的 内 容 。 在 ECMAScript 语法 规范 中 ， 使 用 retum 关键 字 
定义 返回 值 。 当 然 ， 也 可 以 定义 无 返回 值 的 冰 数 ， 还 可 以 仅 使 用 retum 关键 字 而 不 市 具体 返回 值 的 
pi 

这 里 我 们 打算 编写 一 个 ECMAScript 负数 ， 实 现 计 算 两 个 整数 的 产值 绝对 值 ( 正 值 ) 的 操作 。 
首先 ， 看 一 个 不 使 用 返回 值 的 ECMAScript 函数 如 何 实 现 这 个 功能 ( 详 见 源 代 人 码 ch08 目录 中 的 
ch08-es-func-return-none.html 文件 ) 。 


【代码 8-7】 

01 <script type="text/javascript"> 

02 /* 

03 * 定义 ECMAScript 函数 一 一 返回 值 
04 */ 

05 var Vv _ dValue; 

06 function dValue(nl, n2) f{ 

Or fnl >= nNn2Yy° 

08 Vv dValue = nl - n2; 
09 } else { 

10 Vv dvalue = n2 - nl; 
hal } 

12 } 

13 dValue (3, 6); 

14 console.log("dValue(3, 6) = " + Vv dValue); 


ls [eh sul oh ee 


关于 【代码 8-7】 的 分 析 如 下 : 

第 05 行 代码 通过 var 关键 字 定 义 了 一 个 全 局 变量 v_dValue， 用 来 保存 该 差 值 。 

第 06 一 12 行 代码 通过 function 关键 字 定 义 了 一 个 函数 dValue。 其 中 ， 第 07 一 11 行 代码 通过 
认 条 件 语句 计算 两 个 整数 的 差 值 绝对 值 ， 并 保存 在 全 局 变量 v_dValue 中 ， 这 里 没有 使 用 returm 关 
键 字 来 返回 值 。 

第 13 行 代 码 通过 函数 名 dValue(3, 6) 直 接 调用 了 该 图 数 。 这 里 之 所 以 要 单独 调用 一 下 该 函数 ， 
是 为 了 计算 出 关 值 并 保存 在 全 局 变量 v_dValue 中 。 

第 14 行 代 码 通过 全 局 变量 v_dValue 在 浏览 器 控制 台中 输出 了 差 值 结果 。 

页 面 效果 如 图 8.7 所 示 。 差 值 〈 绝 对 值 ) 计算 的 结果 没有 问题 ， 但 【代码 8-7】 实 现 的 过 程 似 
乎 有 点 烦琐 了 。 
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做 时 Filter output Persist Logs 
dValue(3, 6) = 3 “~func-return-none,.html :35:3 


PT TT TT TT TT 


8.7 ”ECMAScript 图 数 返回 值 〈 无 返回 值 方式 ) 
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下 和 面 看 一 下 如 何 使 用 之 返 回 值 的 ECMAScript 函数 实现 该 功能 ( 详 见 源 代码 ch08 目录 中 的 


ch08-es-func-return-value.html 文件 ) 。 


【代码 8-8】 

01 <script type="text/javascript"> 

js /* 

03 * 定义 ECMAScript 函数 一 一 返回 值 
04 */ 

O05 function dValue(nl, n2) 1 

06 TEFENnl >= nn2)0 1 

07 return nl - n2; 

08 } else { 

09 return n2 - nl; 

10 } 

Ta } 

js console.log("dValue(3, 6) = " + dValue(3, 6)); 


SSESCeTPE> 


关于 【代码 8-8】 的 分 析 如 下 : 
第 05 一 11 行 代码 通过 function 关键 字 定 义 了 一 个 函数 dvValue。 其 中 ， 第 06 一 10 行 代码 通过 


让 条 件 语句 计算 两 个 整数 的 差 值 绝对 值 ， 并 使 用 return 关键 字 来 返回 值 。 


第 12 行 代码 通过 函数 名 dValue(3, 6) 直 接 调用 了 该 函数 。 
页 面 效 果 如 图 8.8 所 示 。 差 值 计 算 的 结果 同样 正确 输出 ,但 对 比 【 代 码 8-7】 和 【代码 8-8】 的 


实现 过 程 ， 使 用 返回 值 的 实现 方式 明显 要 简洁 高 效 一 些 。 
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疹 时 Filteroutput [_ | Persist Logs 
dValue(3, 6) = 3 “func-return-value.html :33:3 
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8.8” ECMAScript 函数 返回 值 〈 带 返回 值 方式 ) 
最 后 ，return 关键 字 还 有 一 个 比较 常见 的 用 法 ， 就 是 仅 使 用 retur 而 不 带 有 具体 返回 值 的 方式 可 


以 中 断 函 数 的 执行 。 


下 面 看 一 段 单 独 使 用 return 关键 字 的 ECMAScript 国 数 代 码 《〈 详 见 源 代码 ch08 目录 中 的 


ch08-es-func-return-only.html 文件 ) 。 


186 


【代码 8-9】 
01 <script type="text/javascript"> 
02 /* 
03 * 定义 ECMAScript 函数 一 一 返回 值 (单独 使 用 )》 
04 WW 
05 function returnonly (b) { 
06 console.1og ("单独 使 用 return 可 以 中 断 函 数 的 继续 执行 . . .") ; 
WT | 
08 console .10g ("函数 执行 过 程 将 要 被 return 中 断 ...")， 
09 return; 
10 } 
13 console.1og ("函数 执行 完毕 ， 看 到 效果 了 吧 ! ^-^") ; 


第 8 章 函数 


2 } 

13 returnonly (true); 

14， /script> 

关于 【代码 8-9】 的 分 析 如 下 : 

第 05 一 12 行 代 码 通过 function 关键 字 定 义 了 一 个 图 数 returnOnly。 其 中 ， 第 06 和 第 11 行 代 
码 可 以 在 浏览 器 控制 台中 各 输出 一 行文 字 ; 第 07 一 10 行 代码 通过 if 条 件 选择 语句 判断 函数 
returnOnly(O) 传 递 进来 的 参数 是 否 要 单独 执行 第 08 行 代码 , 并 执行 第 09 行 代码 定义 的 retur 关键 字 。 

第 13 行 代码 通过 函数 名 returnOnly(true) 直 接 调用 了 该 函数 ， 这 里 的 参数 使 用 true。 

页 面 效果 如 图 8.9 所 示 。 第 06 行 和 第 08 行 代码 分 别 在 浏览 器 控制 台中 输出 了 一 行文 字 ， 而 第 
11 行 代码 定义 的 文字 却 没有 被 输出 。 这 是 因为 第 13 行 代 码 调 用 函数 returnOnly(true) 后 ， 程 序 执行 
到 第 09 行 代码 定义 的 return 关键 字 时 ， 提 前 中 断 了 函数 retumOnlyO 的 执行 ， 从 而 导致 第 11 行 代 
人 码 没 有 被 执行 。 
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[Ca Inspec! Consc Debugt Style Ed Performz Memc Netwc Stora( 园 - 园 日 守 日 口 


闸 时 Filteroutput | Persist Logs 
单独 使 用 return 可 以 中 断 函 数 的 继续 执行 . . . -.-func-return-onty.htmL:27:4 
函数 执行 过 程 和 次 要 被 return 中 晰 ., . . “func-return-only.html:29:17 


Bensnnsnsenansensnnnannanenanninannannnanannannnnannnninnnannnnninninnnnnnnannninnnnnnnnnnnnnnnannnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn 


8.9 单独 使 用 return 关键 字 (1) 


下 面 将 【代码 8-9】 中 第 13 行 代码 所 调用 的 函数 retumOnly(true) 参 数 修改 为 false《〈 详 见 源 代 
码 ch08 目录 中 的 ch08-es-func-return-only.html 文件 ) 。 

再 次 运行 页 面 ， 查 看 控制 台 输 出 的 调试 信息 ， 效 果 如 图 8.10 所 示 。 第 06 行 和 第 11 行 代码 分 
别 在 浏览 器 控制 台中 输出 了 一 行文 字 ， 而 第 08 行 代 码 定义 的 文字 却 没有 被 输出 。 这 是 因为 第 13 
行 代码 调用 函数 returnOnly(false) 后 ， 第 07 一 10 行 代 码 通过 证 条 件 选 择 语 名 做 出 判断 ， 第 09 行 代 
码 定 义 的 retum 关键 字 没 有 被 执行 。 因 此 ， 函 数 returnOnlyO 目 然 也 就 没有 被 中 断 ， 第 11 行 代码 也 
就 正常 输出 了 。 
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a Inspec! Consc Debugt Style Ed Performz Memc Netwc Stora 团团 目 窜 日 


曾 时 Filter output (| Persist Logs 
单独 使 用 return 可 以 中 断 函 数 的 继续 执行 .,， “~-func-return-only.html:27:4 
函数 执行 完毕 ， 看 到 效果 了 吧 ! ^-^ "~-func-return-only.html:32:4 





图 8.10 单独 使 用 retum 关键 字 (2) 
8.4 _ arguments 对 象 


本 节 将 介绍 ECMAScript 图 数 中 arguments 对 象 的 内 容 。 在 ECMAScript 语法 规范 中 ， 使 用 特 
殊 对 象 arguments 不 需要 明确 指出 参数 名 也 可 以 访问 这 些 参数 。 对 于 arguments 对 象 的 设计 ， 可 以 
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增强 ECMAScript 图 数 使 用 的 灵活 性 与 功能 性 ， 如 模拟 实现 图 数 重 载 功能 等 。 

首先 ， 看 一 段 通过 使 用 arguments 对 象 的 length 属性 来 获取 函数 参数 数量 的 代码 ( 详 见 源 代码 
ch08 目录 中 的 ch08-es-func-arguments-length.html 文件 ) 。 

【代码 8-10】 


对 象 的 长 度 。 


a 
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<script type="text/javascript"> 


/* 
* 定义 ECMAScript 函数 一 一 arguments 对 象 (length 属性 ) 
ey 
function MessageBox() { 
console.log("arguments.length = " + arguments.1length); 
| 
MessageBox ("Hello"); // 调用 ECMAScript 函数 
MessageBox ("Hello", "ECMAScript"); // 调用 ECMRScript 函数 
MessageBox ("Hello"，"ECMAScript"，"!");  // 调用 ECMAScript 函数 


jeh sl ob 


关于 【代码 8-10】 的 分 析 如 下 : 
第 05 一 07 行 代 码 通过 function 关键 字 定 义 了 一 个 图 数 MessageBox()， 注 意 该 函数 没有 定义 任 
何 参数 。 其 中 ， 第 06 行 代码 通过 arguments 对 象 的 length 属性 arguments.length 获取 了 arguments 


第 08 一 10 行 代 码 分 三 次 调用 了 MessageBox0 函 数 ， 且 每 次 调用 时 的 参数 数量 均 不 同 。 
运行 页 面 ， 查 看 控制 台 输 出 的 调试 信息 ， 效 果 如 图 8.11 所 示 。arguments.length 属性 值 分 别 为 
1、2 和 3， 对 应 的 就 是 三 次 调用 子 数 MessageBox() 时 使 用 的 参数 数量 。 
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[Ca Inspec Consc Debug Style Ed Performz Memc Netwr Stora ~" 轩 目 容 日 吕 


茄 时 Filter output Persist Logs 
arguments. length = 1 “~arguments-length.html:27:4 
arguments. length = 2 “~arguments-length.html :27:4 
arguments. length = 3 “arguments-length.html :27:4 

[>| 


Beenenenenenenee nn 


8.11 arguments 对 象 的 length 属性 


上 和 面 这 段 代码 介绍 了 arguments.length 属性 的 使 用 方法 。 下 面 继续 看 一 个 结合 使 用 arguments. 
length 属性 和 arguments 对 象 的 代码 示例 ( 详 见 源 代 人 码 ch08 目录 中 的 ch08-es-func-arguments.html 


【代码 8-11】 


01 
02 
03 
04 
US 
06 
OW 
08 
09 
1 


<script type="text/javascript"> 


/* 

* 定义 ECMAScript 函数 一 一 arguments 对 象 

ref 

function MessageBox() { 
for (var i=0; i<arguments.length; i++) { 

console.log("arguments[" + i+"] = "+ arguments [i]); 

} 

} 

MessageBox ("1");  // 调用 ECMAScript 函数 


可 MessageBox ("a"，"b"); // 调用 ECMAScript 函数 

六 MessageBox ("i", "ii", "iii"); // 调用 ECMAScript 函数 

下 CT 

关于 【代码 8-11】 的 分 析 如 下 : 

第 05 一 09 行 代 码 通过 function 关键 字 定 义 了 一 个 函数 MessageBox()， 注 意 该 函数 没有 定义 任 


第 06 一 08 行 代 码 通过 for 循环 语句 ， 对 arguments 对 象 的 length 属性 arguments.length 进行 了 


迄 代 ， 用 以 获取 arguments 对 象 的 每 一 次 内 容 (通过 arguments[i] 数 组 方式 ) 。 


第 08 一 10 行 代码 通过 函数 名 MessageBox0 分 三 次 调用 了 该 函数 ， 且 每 次 调用 时 的 参数 数量 及 


内 容 均 不 同 。 


运行 页 面 ， 查 看 控制 台 输 出 的 调试 信息 ， 效 果 如 图 8.12 所 示 。 三 次 调用 函数 MessageBox() 后 ， 


通过 第 06 一 08 行 代码 的 for 循环 语句 ， 全 部 参数 都 输出 在 控制 台中 了 。 
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人 疝 时 Filter output _ | PersistLogs 
arguments[6] = 1 -es-func-arguments.html :28:5 
-=-===<=<=-==-=<===-==-====<=-====<=== -es-func-arguments.html :32:3 
arguments[6]l = a ~es-func-arguments.htmt:28:5 
arguments[1ll = b ~e5-func-arguments,html :28:5 
------------------------------ -<Es-func-arguments,htmti34;9 
arguments[6] = i ~e5-func-arguments,.html :28:5 
arguments[1] = ii “~e5-func-arguments,.html :28:5 
arguments[2] = iii -es-func-arguments.html :28:5 


人 


|>| 


8.12 ”arguments 对 象 使 用 


实际 上 ，【 代 码 8-11】 己 经 十 分 接近 对 函数 重 载 的 使 用 方式 了 。 
下 面 尝 试 通过 arguments 对 象 模拟 一 下 ECMAScript 函数 重 载 的 实现 过 程 〈 详 见 源 代码 ch08 


目录 中 的 ch08-es-func-arguments-overload.html 文件 ) 。 


【代码 8-12 】 


01 <script type="text/javascript"> 


02 1 

03 * 定义 ECMAScript 函数 一 一 arguments 对 象 模拟 函数 重 载 

04 ot 

US function Summary() { 

06 var sum = 0:; 

0 Var len = arguments.length; 

08 for (var i=0; i<len; i++) { 

09 sum += arguments [i]; 

10 } 

| return sum; 

bw } 

3 console.log("Summary(1) = " + Summary (1)); // 调用 ECMAScript 函数 
14 console.log ("Summary(1,2) = " + Summary(1，2)); // 调用 ECMAScript 函数 
15 console.log ("Summary(1,2,3) = " + Summary(1，2，3)); // 调 用 ECMAScript 函数 


> 


关于 【代码 8-12】 的 分 析 如 下 : 
这 段 代 码 实现 了 一 个 累加 器 图 数 Summary()， 用 于 计算 数字 的 累加 和 。 既 然 是 累加 器 ， 那 运算 
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数 的 数量 就 不 是 固定 的 ， 这 样 使 用 传统 函数 方式 实现 起 来 就 很 麻烦 ， 不 过 这 正 是 函数 重 载 的 强项 。 

第 05 一 12 行 代码 通过 function 关键 字 定 义 了 一 个 图 数 Summary0， 注 意 该 图 数 没有 定义 任何 

第 06 行 代 码 定义 了 第 一 个 变量 sum， 用 于 保存 累加 和 。 

第 07 行 代 码 定义 了 第 二 个 变量 len， 用 于 保存 arguments.length 属性 值 。 

第 08 一 10 行 代码 通过 for 循环 语句 对 变量 len 进行 了 迭代 ， 并 使 用 加 法 /赋值 运算 符 (+=) 实 
现 了 数字 累加 计算 。 

第 11 行 代码 通过 return 关键 字 返 回 计 算得 出 的 累加 和 。 

第 13 一 15 行 代码 通过 函数 名 Summary0 分 三 次 调用 该 函数 进行 了 测试 ， 且 每 次 调用 时 的 参数 
数量 及 数值 均 不 同 。 

控制 台 输 出 的 调试 信息 如 图 8.13 所 示 。 三 次 调用 累加 器 函数 Summary(O0 后 ， 每 次 累加 和 的 续 
果 全 部 输出 在 控制 台中 了 。 
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曾 字 Filteroutput [_ | Persist Logs 
Summary(1) = 1 “arguments-overload.html :34:3 
Summary(1,2) = 3 “~arguments-overload.html:35:9 
Summary(1,2,3) = 6 “~arguyuments-overload.html:36:9 

>| 


图 8.13 ”arguments 对 和 象 模拟 函数 重 载 
8.5 ”Function 对 象 


本 节 将 介绍 ECMAScript 函数 中 Function 对 和 象 的 内 容 。 前 文中 介绍 过 Function 构 千 函数 的 方 
式 ， 这 是 源 自 于 在 ECMAScript 语法 规范 中 Function 被 定义 为 对 象 的 缘故 (一 切 皆 为 对 象 )。 在 
ECMAScript 语法 规范 中 ，Function 对 象 可 用 于 定义 任何 图 数 ， 在 这 一 点 上 很 像 C++ 和 Java 语言 
“类 ”的 概念 。 

下 面 通 过 几 个 关于 Function 对 象 的 具体 应 用 实例 ， 详 细 介 绍 一 下 如 何 使 用 Function 对 象 。 


8.5.1 Function 对 象 实现 函数 指针 


首先 来 看 一 个 通过 使 用 Function 对 象 实现 函数 指针 的 代码 示例 《〈 详 见 源 代码 ch08 目录 中 的 
ch08-es-func-Function-pointer.html 文件 ) 。 


【代码 8-13 】 

01 <script type="text/javascript"> 

上 之 /* 

03 * 定义 ECMAScript 函数 一 一 Function 对 象 ( 函 数 指针 ) 

04 */ 

05 var vounm = ne Funetion("niv nw "raturm nlin2ny. 
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06 consoleslogq( SUmISOJ SOUmI SO)) 
07 Var VSumPointer = VvSum; 
08 console .1og("vSumPointer(3，6) = " + VSumPointer (3，6) ) ; 


UE Pe ssl ele 


关于 【代码 8-13】 的 分 析 如 下 : 

这 段 代码 实际 上 是 在 【代码 8-6】 的 基础 上 进行 改写 的 , 目的 是 实现 一 个 函数 指针 的 应 用 实例 。 

第 05 行 代 码 通过 var 关键 字 定 义 了 第 一 个 函数 变量 vSum, 同时 后 面 通过 new 操作 符 和 Function 
关键 字 声 明定 义 了 函数 。 

第 06 行 代码 直接 通过 函数 名 vSum(3, 6) 调 用 函数 。 

第 07 行 代 码 通 过 var 关键 字 定 义 了 第 二 个 变量 vSumPointer, 并 指向 了 第 一 个 函数 变量 vSum， 
这 其 实 就 是 一 个 函数 指针 。 

第 08 行 代 码 直 接 通过 变量 名 vSumPointer(3, 6) 调 用 函数 。 

运行 页 面 , 控制 台 输出 的 调试 信息 如 图 8.14 所 示 。 函 数 指针 vSumPointer 与 原 函 数 vSum 实现 
了 同样 的 功能 ， 是 可 以 相互 蔡 换 的 。 
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会 时 Filter output [| PersistLogs 
vSum(3, 6) = 9 “Function-pointer.html:27:3 
vSumPointer(3, 6) = 9 “Function-pointer.html :29:3 

i | 
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8.14 Function 对 象 实现 函数 指针 


现在 是 不 是 有 点 意思 了 呢 ? 既然 函数 指针 可 以 通过 定义 指 回 原 图 数 的 变量 来 实现 ， 目 然 也 可 
以 作为 参数 来 传递 了 。 
下 面 继续 看 一 个 将 函数 指针 作为 参数 来 传递 的 代码 示例 《〈 详 见 源 代码 ch08 目录 中 的 
ch08-es-func-Function-pointer-param.html 文件 ) 。 
【代码 8-14】 


01 <script type="text/javascript"> 


UU /* 

03 * 定义 ECMAScript 函数 一 一 Function 对 象 (函数 指针 作为 参数 ) 

04 二 

Qs var veoun = new Function("ni no" "return niin2"): 

06 console.10og ("vsSum(37 Oh =™ Fvoum(3r 6)): 

OF function voSumSum(fn, nl, n2) 1 

08 Feturn fn(nl nn2)s 

09 } 

10 console.log("vSumSum(vSum, 3, 6) = " + VvSumSum(vSum, 3, 6)); 


1 sl oe 


关于 【代码 8-14】 的 分 析 如 下 : 

这 段 代 码 同样 也 是 在 【代码 8-6】 的 基础 上 进行 改写 的 ， 目 的 是 实现 一 个 函数 指针 作为 参数 传 
递 的 应 用 实例 。 

第 05 行 代 码 通过 var 关 键 字 定义 了 第 一 个 函数 变 量 vSum, 同时 后 面 通过 new 操 作 待 和 Function 
关键 字 声 明定 义 了 函数 。 
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第 06 行 代码 直接 通过 函数 名 vSum(3, 6) 调 用 函数 。 

第 07 一 09 行 代码 定义 了 一 个 函数 vSumSum()， 同 时 定义 了 3 个 参数 ， 注 意 第 一 个 参数 其 实 是 
当 作 函数 指针 来 使 用 的 。 其 中 ， 第 08 行 代 码 通过 retum 关键 字 返 回 了 一 个 图 数 fn(n1, n2)。 

第 10 行 代码 直接 通过 函数 名 VvSumSum(vSum, 3, 6) 调 用 函数 。 

运行 页 面 , 控制 台 输出 的 调试 信息 如 图 8.15 所 示 。 通 过 第 10 行 代码 的 输出 结果 来 看 , 第 07 一 
09 行 代码 定义 的 函数 VvSumSum(), 将 第 一 个 参数 作为 函数 指针 来 传递 是 成 功 的 。 男 外 ， 第 06 行 与 
第 10 行 的 输出 结果 也 是 完全 一 致 的 。 
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a Inspe Cons Debu StyleE Perforr Mem Netv, Stor: 回 - 园 日 容 日 加 


闸 定 Filter output Persist Logs 
vSum(3, 6) = 9 “pointer-param. html :27:3 
vSumSum(VvSum, 3, 6) = 9 -~pointer-param.html :31:3 


essen tt tt tt ttt tt tt tt ttt tt 


oa 天 


图 8.15 Function 对 象 实现 函数 指针 作为 参数 


8.5.2 ”Function 对 象 属性 


现在 ， 既 然 明 确 了 在 ECMAScript 语法 规范 中 Function 是 作为 对 象 来 定义 的 ， 那 么 Function 
对 象 日 然 也 会 有 属性 。 在 ECMAScript 语法 规范 中 ，Function 对 象 可 以 使 用 共有 的 length 属性 来 表 
示人 参数 的 数量 ， 这 一 点 与 arguments 对 象 是 一 致 的 。 
下 面 是 一 段 使 用 Function 对 象 中 length 属性 的 代码 ( 详 见 源 代码 ch08 目录 中 的 ch08-es-func- 
Function-length.html 文件 ) 。 
【代码 8-15】 


01 <script type="text/javascript"> 


02 /* 

03 * 定义 ECMAScript 函数 一 一 Function 对 象 (length 属性 ) 

04 */ 

05 function MessageBox() { 

06 } 

07 console.1log ("MessageBox.length="+MessageBox.length) ;调用 EcCMAScript 函数 
08 FunetElion Suminl nn2)°1 

09 return nl + n2; 

10 } 

11 console.log ("Sum.length = " + Sum.length); // 调用 ECMAScript 函数 


1200 < crit> 


关于 【代码 8-15】 的 分 析 如 下 : 

第 05 和 第 06 行 代码 通过 function 关键 字 定 义 了 第 一 个 函数 MessageBox(), 注意 该 函数 没有 定 
义 任何 参数 。 

第 07 行 代码 通过 使 用 图 数 名 MessageBox 的 length 属性 MessageBox.length 获取 函数 
MessageBox() 所 定义 参数 的 数量 。 

第 08 一 10 行 代 码 通过 function 关键 字 定 义 了 第 二 个 图 数 Suml,n2)， 注 意 该 图 数 定 义 了 两 个 
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第 11 行 代码 通过 使 用 函数 名 Sum 的 length 属性 Sum.length 获取 了 函数 Sum0 所 定义 参数 的 数量 。 

运行 页 面 ， 控 制 台 输出 的 调试 信息 如 图 8.16 所 示 。 通 过 第 07 行 代码 的 输出 结果 来 看 ， 函 数 
MessageBox() 定 义 参 数 的 数量 为 0。 通 过 第 11 行 代码 的 输出 结果 来 看 ， 函 数 Sum(n1, n2) 定 义 参 数 
的 数量 为 2， 输 出 的 结果 与 实际 定义 情况 是 完全 吻合 的 。 
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首 是 Filter output _ J Persist Logs 
MessageBox. length = 0 “Function-length,html:28:3 
Sum.length = 2 “~Function-length.htmil:32:3 
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8.16 ”Function 对 象 的 length 属性 


8.5.3 ”Function 对 象 方法 


既然 Function 对 象 支 持 共 有 属性 ， 目 然 也 会 支持 共有 方法 。 在 ECMAScript 语法 规范 中 ， 
Function 对 象 可 以 使 用 共有 的 toString() 方 法 来 实现 函数 源 代 人 码 的 输出 。 
下 面 是 一 段 使 用 Function 对 象 中 toString() 方 法 的 代码 ( 详 见 源 代码 ch08 目录 中 的 ch08-es-func- 
Function-toString.html 文件 ) 。 
【代码 8-16 】 


01 <script type="text/javascript"> 


02 /* 

03 * 定义 ECMAScript 函数 一 一 Function 对 象 (toString () 方法) 

04 */ 

Os function MessageBox() { 

06 } 

07 console.log("MessageBox.toString() = " + MessageBox.toString()); 

08 Funecion Sumtnil no 

09 return nl + n2; 

0 } 

bal console.log ("Sum.toString() =" + Sum.toString()); // 调用 ECMAScript 函数 


3 {el esl of 


关于 【代码 8-16】 的 分 析 如 下 : 

这 段 代 码 是 在 【代码 8-15】 的 基础 上 改写 的 ， 把 对 length 属性 的 使 用 改 成 了 对 toString0 方 法 
的 使 用 。 

第 07 行 代码 通过 使 用 图 数 名 MessageBox 的 toString() 方 法 MessageBox.toString0 输 出 了 函数 
MessageBox0 的 源 代 码 。 

第 11 行 代码 通过 使 用 函数 名 Sum 的 toString() 方 法 Sum.toString() 输 出 了 函数 Sum0 的 源 代码 。 

运行 页 面 ， 控 制 台 输出 的 调试 信息 如 图 8.17 所 示 。 通 过 使 用 函数 对 象 的 toString0 方 法 ， 成 功 
输出 了 函数 定义 的 源 代码 ， 这 个 功能 在 代码 的 调试 开发 中 是 非 常 有 用 的 。 
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Developer Tools - ECMAScript in 15-days - http://localhost:63 





[Ca Inspect Consc Debugc Style Edi Performa Memo Netwc Storat 回 -* 园 日 宗 日 口 
何 守 Filter OULEDUL EE: Persist Logs 


MessageBox. toString() = function “Function-toString.html:28:2 
MessageBox() { 
} 


| “Function-toString.html:29:2 


Sum.toString() = function Sum(n}l, n2) { “Function-toString.html:33:2 


return nl + n2; 


8.17 ”Function 对 象 的 toString() 方 法 
= 
8.6 本 革 小 结 


本 章 主 要 介绍 了 ECMAScript 语法 规范 中 关于 函数 的 知识 ， 包 括 ECMAScript 函数 的 声明 、 定 
义 与 调用 ，ECMAScript 负数 返回 值 ， ECMAScript 图 数 中 arguments 对 象 和 Function 对 象 等 方面 的 


内 容 。 
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本 章 将 介绍 ECMAScript 语法 规范 中 关于 系统 函数 的 内 容 。ECMAScript 脚本 语言 为 设计 人 员 
提供 了 大 量 的 系统 函数 (内 置 函 数 ) ， 这 些 函 数 无 须 设 计 人 员 声 明 或 引用 ， 可 以 直接 进行 使 用 〈 由 
浏览 器 提供 支持 ) 。ECMAScript 系统 函数 包括 常规 函数 、 字 符 串 函数 、 数 学 函数 、 数 组 函数 和 日 
期 函数 五 大 类 。 


9.1 ” ECMAScript 常规 函数 


ECMAScript 第 规 函 数 包括 一 些 第 见 的 弹出 对 话 框 、 类 型 转换 、 执 行 代码 和 判断 数 季 函 数 ， 下 
面 详细 进行 介绍 。 


9.1.1 常规 函数 介绍 


ECMAScript 语法 规范 中 定义 的 利 规 图 数 主要 包括 以 下 几 种 : 

@ alert 函数 : 显示 一 个 警告 对 话 框 ， 包 括 一 个 OK 按钮 。 

@ confirm 函数 : 显示 一 个 确认 对 话 框 ， 包 括 OK 和 Cancel 按钮 。 

e@ parseInt 函数 : 将 字符 串 转 换 为 整数 形式 (可 指定 几 进 制 ) 。 

e@ isNaN 函数 : 判断 是 否 为 非 数字 。 

@ eval 函数 : 计算 字符 串 的 结果 ， 执 行 JavaScript 脚本 代码 (注意 参数 仅 接受 原始 字符 串 ) 。 


9.1.2 ”警告 对 话 框 和 确认 对 话 框 


ECMAScript 语法 规范 中 定义 的 警告 对 话 框 (alert〉 和 确认 对 话 框 (confirm) 是 常用 的 系统 函数 。 
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下 面 是 一 个 同时 使 用 警告 对 话 框 (alert〉 和 确认 对 话 框 (confirm ) 的 代码 示例 〈 详 见 源 代 码 
ch09 目录 中 的 ch09-es-alert-confirm.html 文件 ) 。 


【代码 9-1 】 

01 <script type="text/javascript"> 

02 var bConfirm = confirm(" 请 选择 确认 !"); 
03 TE(beontirem) ll 

04 alert("ok ys 

05 } else { 

06 alert ("cancel"); 

07 } 


(0: 


关于 【代码 9-1】 的 分 析 如 下 : 

第 02 行 代 码 通 过 confirm() 函 数 定义 了 一 个 确认 对 话 框 ,并 将 返回 值 赋 给 变量 bconfirm， 此 时 
该 变量 为 一 个 布尔 类 型 。 

第 03 一 07 行 代码 通过 判断 变量 bConfirm 的 布尔 值 是 “ 真 ”或 “ 假 ” 来 选择 弹出 不 同 内 容 的 警 
告 对 话 框 (alert()) 。 

第 04 行 和 第 06 行 代码 通过 alert() 函 数 定义 了 两 个 警告 对 话 框 。 

运行 页 面 ， 初 始 效果 如 图 9.1 所 示 。 页 面 中 弹出 的 是 第 02 行 代 码 定 义 的 确认 对 话 框 。 若 单 击 
OK 按钮 ， 则 页 面 执行 后 的 效果 如 图 9.2 所 示 。 
* ECMAScript in 15-days 


© loc 


回 Prevent this page from creating 
dlalogs 


additlonal 


(tse 





Transferring data from localhost... 





9.1 ECMAScript 警告 对 话 框 和 确认 对 话 框 (1) 
坷 尝试 在 图 9.1 中 单 击 Cancel 按钮 ， 则 页 面 执行 后 的 效果 如 图 9.3 所 示 。 
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Read localhost 


9.3 ECMAScript 警告 对 话 框 和 确认 对 话 框 (3) 
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9.1.3 ”parselnt() 函 数 


在 ECMAScript 语法 规范 中 定义 的 parseIntO 函 数 用 于 解析 一 个 字符 串 ， 然 后 返回 一 个 整数 。 
关于 parseInt() 函 数 的 语法 格式 如 下 : 


parseIrnt(string,. Tadix)s 


其 中 ， 参 数 string 用 于 表示 要 被 解析 的 字符 串 数值 。 右 该 值 以 “0x” 开 头 ， 则 以 十 六 进 制 为 基 
数 。 

参数 radix 是 可 选 的 ， 用 于 表示 要 解析 字符 串 数值 的 基数 。 夺 省 略 radix 参数 或 其 值 为 0， 则 以 
十 进 制 为 基数 进行 解析 ; 若 其 值 为 8 或 16， 则 以 八进制 或 十 六 进 制 为 基数 进行 解析 。 

下 面 是 一 个 使 用 parseInt() 尔 数 进行 解析 整数 的 代码 示例 ( 详 见 源 代 人 码 ch09 目录 中 的 
ch09-es-parseInt.html 文件 ) 。 


【代码 9-2】 

01 <script type="text/javascript"> 

02 nsev steneby 

由己 CEOnscaeeogl( aceseIneE 110) = RBaSenL Oo > 

04 ComsecelooglcpansennE0cTLO 10) = parselnel 10 Oe 
05 consolesloo(l parseInE( 10 2) = "parseIneE( EU 2)): 
06 console. Log (TparseInt( T7080) = "parsgselnG( TY 0))e 
QF oonsole log("parseintl FE T1600= "parseIneEl FF To 
08 console.log ("parseInt('0010') = " + parseIint('0010')); 

09 econsole.l1og ("parseInt( "0x1i0") ea FparseIne('0x10)): 


OM /Cript> 


关于 【代码 9-2】 的 分 析 如 下 : 

第 03 行 代码 通过 parseInt('10") 函 数 来 解析 字符 串 '10'。 注 意 ， 这 里 没有 使 用 radix 参数 ， 表 示 
默认 转换 为 十 进 制 整数 。 

第 04 行 代码 再 次 通过 parseInt('10') 函 数 来 解析 字符 串 '10', 与 第 03 行 代码 不 同 的 是 定义 了 radix 
参数 10， 表 示 转 换 为 十 进 制 整数 。 

第 05 行 代码 第 三 次 通过 parseInt(10) 国 数 来 解析 字符 串 '10',， 但 这 里 定义 了 radix 参数 2， 表示 
转换 为 二 进 制 整数 。 

第 06 行 代码 通过 parseInt(77) 图 数 解析 了 字符 串 '"77'， 同 时 定义 了 radix 参数 8， 表示 转换 为 八 
进 制 整数 。 

第 07 行 代码 通过 parseInt(' 他 ) 函 数 解 析 了 字符 串 ' 包 ， 同 时 定义 了 radix 参数 16， 表 示 转 换 为 十 
六 进 制 整数 。 

第 08 行 代码 通过 parseInt('0010") 函 数 解 析 了 字符 串 '0010', 这 里 定义 的 字符 串 0010 其 实 是 八 进 

第 09 行 代码 通过 parseInt('0x10") 函 数 解 析 了 字符 串 '0x10', 这 里 定义 的 字符 串 0x10 其 实 是 十 六 
进 制 表 示 法 。 

运行 页 面 ， 查 看 控制 台 输 出 的 调试 信息 ， 如 图 9.4 所 示 。 
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Developer Tools - ECMAScript in 15-days - http://localh 
Ca Inspec Cons Debuc Style Et Perform Mem Netw Stors 轩 " 园 目 内 日 可 





商 时 Filteroutput | Persist Logs 
parseInt('10') = 16 ch09-es-parseInt .htmti24:3 
| parseInt('10', 106) = 10 ch09-es-parseInt.html:25:9 
parseInt('10', 2) = 2 ch09-es-parseInt.html :26:9 
parseInt('77', 8) = 63 ch09-es-parseInt.html:27:9 
parseInt('ff', 16) = 255 ch09-es-parseInt.html:28:9 
parseInt('0010') = 0 ch99-es-parseInt .htmt:29:9 
parseInt('0x10') = 16 ch09-es-parseInt.html:30:9 

>| 


9.4 ”parseInt() 函 数 方法 


如 图 9.4 所 示 ， 通 过 对 比 第 03 行 和 第 04 行 代码 输出 的 结果 ， 可 以 看 到 radix 参数 默认 值 就 是 
10， 因 此 如 果 打 算 转换 为 十 进 制 整数 的 话 ， 那 么 定义 或 不 定义 radix 参数 都 是 可 以 的 。 

从 第 05 一 07 行 代码 输出 的 结果 来 看 ，parseInt() 函 数 将 会 根据 radix 参数 定义 的 进 制 值 转换 为 
相应 的 进 制 整数 。 

通过 对 比 第 08 行 和 第 09 行 代码 输出 的 结果 ， 可 以 看 到 parseInt() 函 数 是 无 法 识别 八进制 字符 
串 '0010' 的 ， 但 是 却 可 以 识别 十 六 进 制 学 符 串 '0x10'， 这 一 点 需要 读者 注意 。 


9.1.4 isNaN() 函 数 





在 ECMAScript 语法 规范 中 定义 了 一 个 用 于 判断 某 个 值 是 否 为 非 数字 的 函数 方法 
其 实 ，“NaN” 是 一 个 英文 缩写 ， 全 拼 是 “Nota Number”。 
下 面 是 一 个 使 用 isNaN() 函 数 判 断 是 否 为 非 数 字 的 代码 示例 〈 详 见 源 代码 ch09 目录 中 的 
ch09-es-isNaN.html 文件 ) 。 
【代码 9-3 】 


01 <script type="text/javascript"> 
02 if(isNaN(NaN)) { 


ISNaN()。 


03 console .log("NaN return 七 rue.") ; 

04 } else { 

Qs console.log("NaN return false."); 

06 } 

OftisMaemnollyy 1 

08 console.log("null return true."); 

09 } else { 

10 console.log ("null return false."); 
TS 

ai if(isNaN(undefined)) { 

| console.log ("undefined return true."); 
14 } else { 

15 console.log ("undefined return false."): 
1 

17 if(isNaN(true)) { 

18 console.log("true return true."); 

To eltsel 

20 console.log("true return false."); 
2 
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ZTECTLSNSNN ZJ 


PE | eonsole。 Iog ("123 returenm true. is 

24 } else { 

25 eonsoles1log(”"123 Teturn Falsee"): 
06a.] 

之 了 Af(IisNaN("1i23")) 1 

28 Sonsoles Log(™""123" return trues™)s 
29 } else { 

30 console, loq(”"'123" return falsee")e 
SI 

3290 4f(LiaNaN("abcosy)y | 

33 console, Log(" "ade, retUrn true "Ye 
34 } else { 

要 号 console Log abe acurn falses 
sl 

对 全 | Tf(LSNaN(t ny yo 

38 CEGnmSOClesTog( TeEUrn EUR 

39 } else { 

40 onsolevliog(”’"” Peturn falsee) 

41 } 


A20</gcript> 


关于 【代码 9-3】 的 分 析 如 下 : 

这 段 代 码 主要 通过 isNaN0) 函 数 判 断 一 些 ECMAScript (JavaScript) 保留 宁 、 数 字 和 字符 串 是 
人 否 为 非 数字 。 

运行 页 面 , 控制 台 输 出 的 调试 信息 如 图 9.5 所 示 。 通 过 isNaN0 函 数 判 断 保 留守 NaN、undefined 
均 为 非 数 字 ， 字 符 串 "abc" 也 是 非 数 字 。isNaN0 函 数 判 断 null、true 和 空 字符 串 均 为 数字 ， 判 断 
123 和 "123" 也 是 数字 。 根 据 ECMAScript 语法 规范 中 的 定义 ， 因 为 isNaN() 函 数 是 将 null、true 
和 空 字符 串 当 作 0 来 处 理 的 ， 所 以 会 返回 数字 。 


Develtoper Tools - ECMAScript in 15-days - http: 


中 Inspe Cons Deb' Style PerFc Mem Netv Stor: 轩 " 园 目 窗 日 可 


曾 时 Filter output _|Persist Logs 
NaN return true. ch09-es-isNaN.html:24:4 
| null return false. ch09-es-isNaN.html:31:4 
undefined return true. ch09-es-isNaN.html :34:4 
true return false. ch09-es-isNaN.html:41:4 
123 return false. ch09-es-isNaN,.html :46:4 
"123” return false. ch09-es-isNaN.html:51:4 
'abc’' return true. ch09-es-isNaN.html:54:4 
”Teturn false. ch09-es-isNaN.html:61:4 

>| 


9.5 ”ECMAScript isNaNO 函 数 


9.1.5 ”eval() 函 数 
在 ECMAScript 语法 规范 中 有 一 个 非常 实用 的 eval0 函 数 方法 ， 用 于 执行 JavaScript 脚本 代码 。 


下 面 就 是 一 个 使 用 eval0) 函 数 的 代码 示例 ( 详 见 源 代码 ch09 目录 中 的 ch09-es-eval.html 文件 ) 。 
【代码 9-4】 


199 


ECMAScript 从 零 开 始 学 ( 视频 教学 版 ) 


01 <script type="text/javascript"> 


02 sonsoles Log (Speint > Te 2 = 30 

03 var x = | 

04 console.log("x = " + x); 

05 Var y = 2; 

06 console.1logq("y = "+ y): 

07 console.log("x + y= "+ (x + y)); 

08 consolesLlogq("print br eval(l}) TP2 = 3°)s 
09 eval ("x=1l;console.log('x = "' + eval (x));"); 
10 eval ("y=2;console.log('y "Tt eval(y)}y;?")s 


lal Eva Consoles loog( x DY J bp ee 


1 fen eb sles 


关于 【代码 9-4】 的 分 析 如 下 : 

这 段 代 码 主要 是 模拟 输出 算式 〈1+2=3) 的 计算 过 程 。 其 中 ， 第 03 一 07 行 代码 通过 传统 方式 
进行 输出 ; 第 09 一 11 行 代 码 通 过 eval0 函 数 进行 输出 ， 读 者 可 以 对 比 一 下 这 两 种 方式 。 

第 09 行 代码 其 实 是 通过 eval0) 函 数 执 行 了 一 段 JavaScript 代码 , 具体 就 是 第 03 和 第 04 行 代码 
中 定义 、 初 始 化 和 输出 变量 x 的 过 程 。 

第 10 行 代码 与 第 09 行 代码 一 样 ， 通 过 eval0 函 数 执行 了 第 05 和 第 06 行 代码 的 定义 、 初 始 化 
和 输出 变量 y 的 过 程 。 

第 11 行 代 码 再 次 通过 eval0 函 数 执行 了 一 段 JavaScript 代码 ， 有 具体 就 是 第 07 行 代码 中 变量 x 
与 变量 y 相 加 的 运算 。 

运行 页 面 ， 控 制 台 输出 的 调试 信息 如 图 9.6 所 示 。 通 过 使 用 eval0) 函 数 可 以 很 好 地 实现 解析 
JavaScript 脚本 代码 的 功能 。 需 要 特别 注意 ，eval() 函 数 内 的 参数 是 一 段 字 符 串 ,解析 执行 的 也 是 字 
符 串 。 这 是 因为 根据 ECMAScript 语法 规范 中 要 求 ，eval() 函 数 内 的 参数 必须 是 字符 串 ， 不 论 参 数 
中 包含 多 少 条 要 执行 的 语句 。 


Developer Tools - ECMAScript in 15-days - http:// 
[a Inspe Cons Debu Stylei Perfor Mem Nety Stor; 轩 " 园 上 日 窗 唱 了 可 





闪 时 Filter output _| Persist Logs 
-3 chO9-es-eval.html :23:3 
x=1 chO9-es-eval.html:25:3 

| y=2 chO9-es-evatl .html:27:9 
,A chO9-es-eval.html:28:3 
print by eval() : 1+2= 3 chO9-es-eval.html:29:9 
x=1 chO9-es-eval .html:1:5 
y=2 chO9-es-eval .html:1:5 
和 和 寺 Ys chO9-es-eval .html:1:] 
S| 


Basnsesenensnentanenennssnenennnnnnennnnnnnnnnnnn nn 


图 9.6 ECMAScripteval(0) 函 数 


9.2 ECMAScript 字符 串 函 数 


ECMAScript 字符 串 图 数 包 括 一 些 贡 见 的 索引 了 字符、 定位 下 标 、 获 取 长 度 和 大 小 写 转换 的 函数 
方法 ， 下 面 进 行 详细 介绍 。 
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ECMAScript 语法 规范 中 定义 的 字符 串 函数 主要 包括 以 下 几 种 : 


(1) charAt 函数 : 返回 字符 串 中 指定 的 某 个 字符 。 
charAt 国 数 的 语法 如 下 : 
stringobject.charRt (index) /7 可 返回 指定 位 置 的 字符 


其 中 ，index 参数 是 必需 的 ， 表 示 字 符 在 字符 串 中 的 下 标 数值 。 
(2) indexOf 函数 : 返回 茶 个 指定 字符 在 字符 串 中 首次 出 现 的 下 标 位 置 ， 从 字符 串 左 边 开始 
查找 。 
indexOf 函数 的 语法 如 下 : 
stringObject.index0Of (searchvalue, fromindex) // 返回 某 个 指定 的 字符 串 值 在 字符 串 中 首次 出 现 的 下 标 位 置 


其 中 ，searchvalue 参数 是 必需 的 ， 表 示 需 要 检索 的 字符 串 值 。 
fromindex 参数 是 可 选 的 整数 值 ， 规 定 在 字符 串 中 开始 检索 的 位 置 。 其 合法 取 值 是 0 到 
stringObjectlength-1。 知 省 略 该 参数 ， 则 将 从 字符 串 的 首 字 符 开 始 检 索 。 
(3) lastIndexOf 了 数 : 返回 字符 串 中 东 个 指定 字符 在 字符 串 中 首次 出 现 的 下 标 位 置 ， 从 字符 
串 右边 开始 查找 。 
lastIndexOf 函数 的 语法 如 下 : 


stringObject.1lastIndexOf (searchvalue,fromindex) // 返回 一 个 指定 的 字符 串 值 最 后 出 现 的 位 置 ， 在 一 
个 字符 串 中 的 指定 位 置 从 后 向 前 搜索 


其 中 ，searchvalue 参数 是 必需 的 ， 表 示 需 要 检索 的 字符 串 值 。 
fromindex 参数 是 可 选 的 整数 值 ， 规 定 在 字符 串 中 开始 检索 的 位 置 。 其 合法 取 值 是 0 到 
stringObjectlength-1。 知 省 略 该 参数 ， 则 将 从 字符 串 的 最 后 一 个 字符 开始 检索 。 
(4) length 函数 : 返回 字符 串 的 长 度 。 
(5) substring 函数 : 返回 字符 串 中 指定 的 几 个 字符 〈 人 参数 非 负 ) 。 
substring 国 数 的 语法 如 下 : 
stringobject.substring(start,stop) ”// 用 于 提取 字符 串 中 介 于 两 个 指定 下 标 之 间 的 字符 


其 中 ，start 参数 是 必需 的 ， 为 一 个 非 负 的 整数 ， 规 定 要 提取 子 串 的 开始 字符 在 stringObject 中 
的 位 置 。 

stop 参数 是 可 选 的 ， 表 示 一 个 非 负 的 整数 ， 比 要 提取 子 串 的 最 后 一 个 字符 在 stringObject 中 的 
位 置 多 1。 若 省 略 该 参数 ， 则 返回 的 子 串 一 直到 字符 串 的 结尾 。 

注意 ， 若 定义 了 stop 参数 ， 则 返回 的 子 串 包括 start 处 的 字符 ， 但 不 包括 stop 处 的 字符 。 

(6) substr 函数 : 返回 字符 串 中 指定 的 几 个 字符 〈 人 参数 可 负 ) 。 
substr 国 数 的 语法 如 下 : 
stringobject.substr (start,1length) // 在 字符 串 中 抽取 从 start 下 标 开 始 的 指定 长 度 的 字符 串 


其 中 ，start 参数 是 必需 的 ， 定 义 抽取 子 串 的 起 始 下 标 ， 必 须 是 数值 类 型 ， 如 果 是 负数 ， 那 么 
该 参数 声明 从 字符 串 的 尾部 开始 算 起 始 的 位 置 。 例 如 ，-1 指 字 符 串 中 最 后 一 个 字符 ，-2 指 倒数 第 
二 个 字符 ， 以 此 类 推 。 

length 参数 是 可 选 的 , 定义 子 串 的 字符 数 必须 是 数值 类 型 .如 果 省 略 了 该 参数 , 那么 返回 从 start 
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开始 位 置 到 结尾 的 字符 串 。 
注意 : 由 于 ECMAScript 标准 中 未 对 该 方法 进行 标准 化 ， 因 此 不 建议 使 用 该 函数 。 
(7) toLowerCase 国 数 : 将 字符 串 中 字母 转换 为 小 写 。 
(8) toUpperCase 函数 : 将 字符 串 中 字母 转换 为 大 与 。 


下 面 是 一 个 综合 使 用 以 上 字符 串 函 数 的 代码 示例 〈 详 见 源 代码 ch09 目录 中 的 ch09-es-string. 


html 文件 ) 。 


【代码 9-5 】 

01 

02 var str 
Ei console. 
04 console. 
05 console. 
06 console. 
07 console. 
08 console. 
09 console. 
10 console. 
Ti </script> 


<script type="text/javascript"> 


= "abcdefghijklmnopqrstuvwxyz"; 


Toog(stre. 
log (SEr、 
Log(strs 
1o0 (Ser 
od (SEPs 
Too(lstr. 
CGIS 
og (St 


charAt (0) ); 

indexOf ("Cn) ) 
lascIndexoOEcn) 

length); 

substring (18)); 

substring (8, 16)); 
toUpperCase () ) ; 

toLowerCase (str.toUpperCase () ) ) ; 


关于 【代码 9-5】 的 分 析 如 下 : 

第 02 行 代码 定义 了 一 个 字符 串 变 量 sttr， 并 初始 化 了 26 个 英文 小 写字 母 。 

第 03 行 代码 通过 charAt() 函 数 获 取 了 字符 串 变 量 str 的 第 一 个 字符 ， 注 意 下 标 数值 为 0。 

第 04 行 代码 通过 indexOf0) 函 数 获取 了 字符 串 变量 str 中 字符 "c" 的 下 标 数值 。 

第 05 行 代码 通过 lastIndexOf() 函 数 同样 是 获取 了 字符 串 变 量 str 中 字符 "ec" 的 下 标 数值 。 

第 06 行 代码 通过 length 函数 方法 获取 了 字符 串 变 量 str 的 字符 长 度 。 

第 07 行 代码 通过 substring0 函 数 获取 了 字符 串 变 量 str 中 从 下 标 数 值 18 开始 到 字符 串 结束 的 


子 字符 串 。 


第 08 行 代码 通过 substring0) 函 数 获取 了 字符 串 变 量 str 中 从 下 标 数值 8 开始 到 下 标 数值 16 的 


子 字符 串 。 

第 09 行 代码 通过 toUpperCase0 函 数 将 字 
符 串 变量 str 全 部 转换 为 大 写字 母 。 

第 10 行 代码 在 第 09 行 代码 的 基础 上 , 通 
过 toLowerCase() 函 数 将 字符 串 变 量 str 再 次 转 | : 


换 为 小 写字 母 。 


运行 页 面 ， 控 制 台 输出 的 调试 信息 如 图 
9.7 所 示 。 
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前 是 Filter output 
a 


(| Persist Logs 
chO9-es-string.html:24:3 
chO9-es-string.html :25:3 


2 chO9-es-string.html:26:3 
26 ch09-es-string.html :27:3 
stuvwxyz ch09-es-string,.html :28:3 


ch09-es-string.html :29:3 
chO9-es-string.html:30:3 
chO9-es-string.html:31:3 


ijklimnop 
ABCDEFGHIJKLMNOPQRSTUVWXYZ 
abcdefghijklmnopqrstuvwxyz 


9.7 ” ECMAScript 字符 串 函 数 


9.3 ”ECMAScript 数学 男 数 


第 9 章 ”系统 函数 


ECMAScript 数学 函数 包括 一 些 和 常见 的 绝对 值 、 三 角 函 数 、 最 大 最 小 整数 和 随机 数 的 计算 函数 ， 


下 面 进行 详细 介绍 。 


ECMAScript 语法 规范 中 定义 的 数学 函数 主要 是 通过 Math 对 象 来 实现 的 ， 具 体 包括 以 下 函数 


《按照 字母 顺序 排列 ) : 

abs 函数 : 返回 一 个 数字 的 绝对 值 。 

acos 函数 : 返回 一 个 数字 的 反 余弦 值 ， 结 果 为 0~X 的 缴 度 。 
asin 函数 : 返回 一 个 数字 的 反正 弦 值 ， 结 果 为 -x/2~N/2 的 弧度 。 
atan 函数 : 返回 一 个 数字 的 反正 切 值 ， 结 果 为 -W/2 ~1/2 的 弧度 。 
ceil 函数 : 返回 一 个 数字 的 最 小 整数 值 (大 于 或 等 于 ) 。 

cos 函数 : 返回 一 个 数字 的 余弦 值 ， 结 果 为 -1 一 1。 

exp 函数 : 返回 e (上 自然 对 数 ) 的 乘 方 值 。 

floor 函数 : 返回 一 个 数字 的 最 大 整数 值 (小 于 或 等 于 ) 。 

log 函数 : 自然 对 数 函 数 ， 返 回 一 个 数字 的 自然 对 数 (e) 值 。 
max 函数 : 返回 两 个 数 的 最 大 值 。 

min 函数 : 返回 两 个 数 的 最 小 值 。 

pow 函数 : 返回 一 个 数字 的 乘 方 值 。 

random 函数 : 返回 一 个 0~1 的 随机 数值 。 

round 函数 : 返回 一 个 数字 的 四 舍 五 入 值 ， 类 型 是 整数 。 

sin 函数 : 返回 一 个 数字 的 正弦 值 ， 结 果 为 -1 一 1。 

sqrt 函数 : 返回 一 个 数字 的 平方 根 值 。 

tan 函数 : 返回 一 个 数字 的 正切 值 。 


以 上 这 些 数学 函数 在 纯 数学 计算 方面 的 编程 中 是 非常 有 用 的 。 下 面 是 一 个 使 用 部 分 数学 函数 


的 代码 示例 〔( 详 见 源 代码 ch09 目录 中 的 ch09-es-math.html 文件 ) 。 


【代码 9-6】 

01 <script type="text/javascript"> 

02 console.log ("Math.max(2, 3) = " + Math.max (2, 3)); 

U3 Consoles log (PMath mnt27 3) = PMath mn(2 3 

04 console- log("Math eall(2 0 3 Math coall(t2/ 3)). 

05 console log (SMath < floor(2 /3)=" -Math flioor(2 /3)). 

06 console.log ("Math.round(2 / 3) = " + Math.round(2 / 3)); 

07 GoOnsole Log (FMath Donwnl27 3 = MAEhn Pon(l2r 3))2 

08 console.log("Math.random() : " + Math.random()); 

09 console.1og ("计算 产生 0 一 100 随机 数 : " + (100 * Math.random())); 
10 console.1og ("计算 产生 0 一 100 随机 整数 : " + Math.round(100 * Math.random())); 


1 Cript> 
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关于 【代码 9-6】 的 分 析 如 下 : 
第 02 一 10 行 代码 分 别 通过 一 系列 数学 函数 进行 了 相应 的 运算 ， 并 在 控制 台 输 出 了 调试 信息 。 
运行 HTML 页 面 ， 控 制 台 输出 的 调试 信息 如 图 9.8 所 示 。 





Devetoper Tools - ECMAScript in 15-days - http://ocalhos 
Ca Inspec Cons' Debug Style Ec Perform Memr Netw Stora 轩 " 国 目 窗 日 可 


曾 时 Filter output Persist Logs 
Math.max(2, 3) = 3 chO9-es-math.html :23:3 
Math.min(2, 3)} = 2 ch09-es-math.html:24:3 

| Math.ceil(2 / 3) = 1 chO9-es-math.html:25:3 
Math.flioor(2 / 3) = 6 ch09-es-math.html :26:3 
Math.round(2 / 3) = 1 ch09-es-math,html :27:;3 
Math.pow(2, 3) = 8 chO9-es-math.html :28:3 
Math,random() : 6.36767691765343546 ch09-es-math.,html :29:3 
计算 产生 6 一 160 陆 机 数 : 84.64749542337793 ch69-es-math,htmL:39;:9 
计算 产生 69~160 陆 机 整数 : 26 ch69-es-math,htmlL;:31;9 
>| 


Besemeaneensnsensenennnnenennnnnnnnn mn nnn nn ni i i ni i i i i i 


9.8 ” ”ECMAScript 数学 函数 (Math ) 


9.4 ECMAScript 数组 函数 


ECMAScript 数组 图 数 包 括 一 些 疝 见 针对 数组 的 连接 ,倒序 和 排序 的 图 数 方法 , 下 面 进行 详细 介绍 。 


9.4.1 数组 函数 介绍 


ECMAScript 语法 规范 中 定义 关于 数组 的 图 数 主 要 包括 以 下 几 种 : 
(1) join 函数 : 转换 并 连接 数组 中 的 所 有 元 素 为 一 个 字符 串 。 
join 函数 的 语法 如 下 : 
arrayOblect.join(Separator ) 
其 中 ，separator 参数 为 可 选 的 ， 表 示 要 使 用 的 分 隅 符 。 大 省 略 该 参数 ， 则 使 用 逗号 作为 分 隅 
人 符 。 
(2) reverse 图 数 : 将 数组 元 素 顺 序 其 倒 。 
reverse 图 数 的 语法 如 下 : 


arrayObject.reverse( ) 


该 函数 仅仅 改变 原来 的 数组 ， 不 会 创建 新 数组 。 





(3) sort 函数 : 将 数组 元 素 重 新 排序 。 
sort 国 数 的 语法 如 下 : 
arrayObject.sort(sortby) 
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其 中 ，sortby 参数 是 可 选 的 ， 用 于 规定 排列 顺序 。 大 使 用 该 参数 ， 则 必须 是 一 个 比较 函数 。 
(4) from 函数 : 将 类 似 数组 的 对 象 或 可 友 代 的 对 象 转换 为 真正 的 数组 。 

from 国 数 的 语法 如 下 : 

Array.from(arr) 

其 中 ，arr 参数 定义 为 一 个 类 似 数组 或 可 友 代 的 对 象 。 
(5) length 图 数 : 返回 数组 的 长 度 。 


9.4.2 join 函数 


在 ECMAScript 数组 函数 中 ，join0 函 数 用 于 连接 数组 中 的 所 有 元 素 并 转换 为 一 个 字符 串 。 下 
是 一 个 数组 连接 (join 函数 ) 的 代码 示例 ( 详 见 源 代码 ch09 目录 中 的 ch09-es-arr-join.html 文件 ) 。 
【代码 9-7】 
01 <script type="text/javascript"> 
02 var arr = NoeW Arrav lar Bo Ds 
0U3 console.logl(larr); 
04 console.log(arr.join()); 


05 console.log(arr.join('-"')); 
O00 = /sacript> 


关于 【代码 9-7】 的 分 析 如 下 : 

第 02 行 代 码 定义 了 一 个 数组 变量 arr， 并 进行 了 初始 化 操作 。 

第 03 行 代 码 直 接 在 控制 台 输 出 了 数组 变量 arr 的 调试 信息 。 

第 04 行 代 码 对 数组 变量 arr 使 用 了 join0 函 数 , 并 在 控制 台 输 出 了 该 数组 变量 arr 的 调试 信息 。 

第 05 行 代 码 对 数组 变量 arr 使 用 了 设 定 分 隅 符 “-” 为 join() 函 数 的 参数 ， 并 在 控制 台 输出 了 该 
数组 变量 arr 的 调试 信息 。 

运行 页 面 ， 控制 台 输 出 的 调试 信息 如 图 9.9 所 示 。 第 04 行 代码 使 用 不 带 参 数 的 join0 函 数 会 默 
认 添 加 逗号 “，” 作 为 分 隅 符 。 


Developer Tools - ECMAScript in 15-days - http://localh 





a Insper Cons Debuc Style Er Perform Mem Netw Storz 轩 ~ 园 目 窗 日 可 


兽 时 Filter output _] Persist Logs 
i i he chO9-es-arr-join.html:24:3 
a,b,c chO9-es-arr-join.html:25:3 

| a-b-c chO9-es-arr-join.html:26:3 
> 


ae 有 


9.9 ECMAScript 数组 函数 join0) 


9.4.3 ”reverse 函数 


在 ECMAScript 数组 子 数 中 ，reverse0 函 数 用 于 将 数组 项 顺序 题 倒 。 下 和 面 是 一 个 数组 顺序 颠倒 
(reverse 国 数 ) 的 代码 示例 ( 详 见 源 代码 ch09 目录 中 的 ch09-es-arr-reverse.html 文件 ) 。 
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【代码 9-8】 


01 <script type="text/javascript"> 

029 var arr= new Arravyv( a D'or): 
UJ eonaole. Loq(lare)e 

04 console.logl(arr.reverse()); 

05 </acript> 


关于 【代码 9-8】 的 分 析 如 下 : 

第 02 行 代 码 定义 了 一 个 数组 变量 arr， 并 进行 了 初始 化 操作 。 

第 03 行 代码 直接 在 控制 台 输 出 了 数组 变量 arr 的 调试 信息 。 

第 04 行 代码 对 数组 变量 arr 使 用 reverse(O) 函 数 进行 了 顺序 颠倒 操作 , 并 在 控制 台 输 出 了 该 数组 
变量 arr 的 调试 信息 。 

运行 页 面 ， 控 制 台 输出 的 调试 信息 如 图 9.10 所 示 。 





Developer Tools - ECMAScript A 


[Ca Inspect Consc Debugc Style Edi Performa Memo Netwc Storac 回 - 园 日 半日 上 口 


疝 | 灾 Filteroutput _ | Persist Logs 
parvay I Ws BD] chQ9-es-arr-reverse.html:24:3 
pArray (“es "bb, “a ] chQ9-es-arr-reverse.html :25:3 

| 


Doeeeeeenneneneennennne nnn 


9.10 ECMAScript 数组 函数 reverse() 


9.4.4 sort 函数 


在 ECMAScript 数组 图 数 中 ，sortO 图 数 用 于 将 数组 元 素 重 新 排序 。 下 面 是 一 个 进行 数组 排序 
(sort 图 数 ) 和 计算 数组 长 度 (length 属性 ) 的 代码 示例 《〈 详 见 源 代码 ch09 目录 中 的 ch09-es-arr- 
sort.html 文件 ) 。 


【代码 9-9】 

01 <script type="text/javascript"> 

02 yarvartestr mn NON AEA 0 
03 console.1log(arr str.length); 

04 console.log(arr str.sort()); 

Qs Var arr num = new Array(9, 6, 15, 3, 333, 88); 
06 console .log (arr num.length); 

07 console.1log (arr num.sort()); 

08 i 

09 * 定义 用 于 sort 函数 进行 排序 的 方法 

10 + 

Le EneconsOeecBYIUa DT 

TZ return a - b; 

13 } 

14 console. log (arr num. Sort (sortBy}); 


I /Scrip 


关于 【代码 9-9】 的 分 析 如 下 : 
第 02 行 代码 定义 了 第 一 个 字符 数组 变量 arr_str， 并 进行 了 初始 化 操作 。 
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第 03 行 代 码 对 数组 变量 arr_str 使 用 length 函数 方法 获取 数组 长 度 ， 并 在 控制 台 输 出 调试 信息 。 

第 04 行 代码 对 数组 变量 arr_str 使 用 sort() 函 数 进 行 排序 操作 , 并 在 控制 台 输 出 数组 变量 arr str 
的 调试 信息 。 

第 05 行 代码 定义 了 第 二 个 整数 型 数组 变量 arr_ num， 并 进行 了 初始 化 操作 。 

第 06 行 代 码 对 数组 变量 arr num 使 用 length 函数 方法 获取 数组 长 度 ， 并 在 控制 台 输 出 调试 信息 。 

第 07 行 代码 对 数组 变量 arr num 使 用 sort0 函 数 进行 排序 操作 ， 并 在 控制 台 输 出 数组 变量 
arr num 的 调试 信息 。 

第 11 一 13 行 代码 定义 了 一 个 用 于 排序 的 函数 sortBy， 该 函数 将 作为 sort0 函 数 的 参数 来 使 用 ， 
后 面 我 们 会 详细 介绍 sortBy 函数 。 

第 14 行 代码 对 数组 变量 arr_ num 使 用 sort() 函 数 进 行 排 友 操 作 , 注 意 , 增加 了 排序 参数 sortBy， 
再 次 在 控制 台 输 出 数组 变量 arr_num 的 调试 信息 。 

运行 页 面 ， 控 制 台 输出 的 调试 信息 如 图 9.11 所 示 。 

如 图 9.11 中 第 头 所 指 ， 无 论 是 对 于 字符 数组 或 整数 型 数组 ， 使 用 sort() 函 数 排序 时 都 会 将 数组 
项 视 为 字符 来 进行 排序 ， 这 一 点 从 第 04 和 第 07 行 代码 输出 的 结果 就 可 以 判断 出 。 

因此 ， 知 想 让 sort() 函 数 对 整数 型 数组 进行 正常 排序 ， 则 需要 定义 排序 函数 sortBy 作为 sort() 
国 数 的 参数 。 其 中 ， 排 序 函 数 sortBy 中 的 a、b 参数 用 于 定义 排序 规则 ，a 表示 前 一 个 数组 项 ，b 
表示 后 一 个 数组 项 ; “a-b” 的 结果 者 小 于 0 则 表示 a 小 于 b， 数 组 项 顺序 不 变 ; “a-b” 的 结果 者 
大 于 0 则 表示 a 大 于 b， 数 组 项 顺序 颠倒 ，“a-b” 的 结果 若 等 于 0 则 表示 a 等 于 b， 数 组 项 不 进行 
排序 。 所 以 ， 第 14 行 代码 使 用 了 融 sortBy 参数 的 sortO 国 数 后 ， 才 能 得 到 整数 型 数组 arr_ num 的 正 
确 排序 〈 由 小 到 大 ) 。 





Developer Tools - ECMAScript in 15-days - http://localhost:63342 
中 ”Inspect Conso Debugg Style Edit Performar Memor Netwo Storag 轩 " 轩 上 日 窗 日 可 


从 是 Filter output (| Persist Logs 
--- Array - sort() 函 数 排序 字符 囊 数组 - - - chO9-es-arr-sort.html:23:3 
数组 长 度 : 6 chO9-es-arr-sort.html:25:3 

| 排序 结果 : i chg9-es-arr-sort.html :26:3 
i chO9-es-arr-sort.html:27:3 
-- Array - sort{) 函 数 排序 整数 数组 --- chO9-es-arr-sort.html:28:9 
数组 长 度 : 6 chg9-es-arr-sort,.htmt:36:3 
sort( ) 函数 不 带 戎 数 的 排序 结果 : A— chO9-es-arr-sort.html:31:9 
b>-Arreayv [7-13 S30 2390 0@0 BB. chO9-es-arr-sort.html:32:3 
sort( ) 函数 带 戎 数 的 排序 结果 : 所 一 一 chg9-es-arr-sort,.htmtL:39;:9 
bp-Array | .BB..-B 3 .257 SB, 333 3 chO9-es-arr-sort.html:40:3 

TE 


Besnsmsnsnannsnensn nnsn sansnnnn sananntnn sn 


9.11 ECMAScript 数组 函数 sort0 


9.4.5 from 函数 
在 ECMAScript 数组 函数 中 , from() 函 数 用 于 将 一 个 类 似 数组 的 对 象 转换 为 真正 的 数组 。 男 外 ， 


Array 对 象 的 from0 函 数 是 ECMAScript 6 版 本 中 新 增 的 一 个 函数 方法 。 
下 面 是 一 个 使 用 数组 转换 (from 函数 ) 的 代码 示例 〈 详 见 源 代码 ch09 目录 中 的 
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ch09-es-arr-from.html 文件 ) 。 


【代码 9-10】 

01 <script type="text/javascript"> 

0Q2 /* 

03 * 将 类 似 数组 对 象 转换 为 数组 

04 二 

05 Var arrLike = { 

06 Uma 

QO 3 | 

08 er Te 

09 length: 3 

10 }; 

4 区 let arrL = Array.from(arrLike); 
Bs Console .log (arrL) : 

3 1 

14 * 将 可 和 迭代 对 象 转换 为 数组 

1 Et 

16 Var str = "ECMAScript"; 

1 let arrC = Array.from(str);} 

和 consSsole.1log (arrC) : 

19 本 

20 * 将 函数 内 部 对 象 (arguments ) 转换 为 数组 
2 a 

多 之 Funoction funetar be eo) il 

23 let args = Array.from(arguments); 
24 console.log (args); 

2 与 } 

26 EU 


2 /soript> 


关于 【代码 9-10】 的 分 析 如 下 : 


第 05 一 10 行 代码 定义 了 一 个 类 似 数 组 的 对 象 arLike， 第 11 行 代码 通过 from() 函 数 将 该 对 象 


转换 为 数组 。 


第 16 行 代码 定义 了 一 个 字符 串 〈 可 迭代 的 ) ,第 17 行 代 码 通过 from() 函 数 将 该 字符 串 转 换 为 


数组 。 


第 22 一 25 行 代码 定义 了 一 个 函数 func， 第 23 行 代码 通过 from0) 函 数 将 该 函数 func 内 部 的 对 


象 arguments 转换 为 数组 。 
运行 页 面 ， 控 制 台 输出 的 调试 信息 如 图 9.12 所 示 。 





Developer Tools - ECMAScript in 15-days - http://localhost:63342/WebstormP 


[Ca Inspector Console Debugger Style Editor Performance Memory Network Storage 半 " 园 目 窜 日 可 


会 时 Filter output 
> Array [ Ef “es “i ] 
. Array [ 过 = | ee i wd re bh “全权 和 人 ] 


chQ9-es-arr-from.html:33:3 
chQ9-es-arr-from.html:39:9 


Pp RI ch69-es-arr-from.htmt:45:13 


Renooooopeoopecoeroenaenocnocnecneccecoeroccacrecnooceococcecceroccccccecccceeccoccccecce2cc0ccccccc200c00000002002200200c0020C02C02000e00e00eceecceceececceccecceccececcocceocc0cec0c00200c0cecce0000c0020c0000200e0020022000002C0C22000020c20020020c2022c20c200e00200200cCC020000C0Ce00e0Ceceeceeceececce0ce00ec0e00c00cceccecccc0cc0cccc00c 航 


9.12 ECMAScript 数组 函数 fom0) 
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9.5 ” ECMAScript 日 期 函数 


ECMAScript 日 期 函数 包括 一 些 常见 的 针对 年 、 月 、 日 、 星 期 、 小 时 、 分 钟 和 秒 数 的 函数 方法 ， 
下 面 进行 详细 介绍 。 
ECMAScript 语法 规范 中 定义 了 一 组 日 期 函数 ， 比 较 常 用 的 有 以 下 几 种 : 


@ getYear 函数 : 返回 日 期 的 “年 ”部 分 ， 返 回 值 以 1900 年 为 基数 。 

getMonth 函数 : 返回 日 期 的 “月 ”部 分 ， 值 为 0~ 11。 

getDay 函数 : 返回 星期 几 ， 值 为 0~6。 其 中 ，0 表示 星期 日 、1 表示 星期 一 、...、6 表示 星期 
getDate 函数 : 返回 日 期 的 “日 ”部 分 ， 值 为 1~31.。 

getHours 函数 : 返回 日 期 的 “小 时 ”部 分 ， 值 为 0~23。 

getMinutes 函数 : 返回 日 期 的 “分 钟 ” 部 分 ， 值 为 0~ 59。 

getSeconds 函数 : 返回 日 期 的 “ 秒 ” 部 分 ， 值 为 0~ 539。 

getTime 函数 : 返回 系统 时 间 ， 具 体 为 1970 年 1 月 1 日 至 当前 时 间 的 毫秒 数 。 


下 和 面 是 一 个 使 用 以 上 日 期 水 数 的 代码 示例 ( 详 见 源 代 人 码 ch09 目录 中 的 ch09-es-date.html 文件 )。 
【代码 9-11】 


01 <script type="text/javascript"> 

02 var date = new Date(); 

03 console.log("getYear() is " + date.getYear()); 
04 var thisYear = 1900 + date.getYear(); 

Uo eonsole lo This vear TS thlsYear)s 

06 console.log("getMonth() is " + date.getMonth()); 
07 var thisMonth = date.getMonth() + 1; 

Ug eonsole loq( Th monh 19 "EnaasMontn)s 

09 console.log("getDate() is " + date.getDate()); 
10 var thisDate = date.getDate (); 

11 console.log("This date is " + thisDate); 

12 console.log("getDay() is " + date.getDay()); 

13 console.log("getHours() is " + date.getHours () ) ; 
14 console.log("getMinutes() is " + date.getMinutes()); 
15 console.log("getTime() is " + date.getTime()); 
UN /seelpe> 


运行 HTML 页 面 ， 控 制 台 输出 的 调试 信息 如 图 9.13 所 示 。 
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Developer Tools - ECMAScript in 15-days - http://to 
[a Inspe Cons Debu' StyleE Perforr Mem Netv Stor: 轩 " 轩 上 日 窜 口 可 





商 时 Filter output (| Persist Logs 
getYear() is 118 chg9-es-date.htmti:z24;3 
This year is 2018 chO9-es-date.html :26:3 
getMonth()} is 4 chQ9-es-date.html:27:3 

| This month is 5 chO9-es-date.html :29:3 
getDate() is 5 chQ9-es-date.html :30:3 
This date is 5 chQ9-es-date.html :32:3 
getDay() is 6 ch09-es-date.html :33:3 
getHours() is 8 chQ9-es-date.html:34:3 
getMinutes() is 51 ch99-es-date,htmti:351;3 
getTime() is 1525452669928 chO9-es-date.html :36:3 

i >| 


9.13 ECMAScript 日 期 函数 
vw 
9.6 本 革 小 结 


本 草 主 要 介绍 了 ECMAScript 语法 规范 中 关于 系统 函数 的 知识 ， 包 括 常 规 函 数 、 了 字符 串 函数 、 
数学 函数 、 数 组 函数 和 日 期 函数 等 ， 并 通过 一 些 具体 实例 进行 了 讲解 。 
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函 效 扩展 


本 章 将 介绍 ECMAScript 语法 规范 中 关于 函数 扩展 的 内 容 ， 主 要 包括 ECMAScript 6 版 本 中 新 
增 的 特性 。ECMAScript 函数 扩展 主要 包括 函数 的 参数 扩展 、 属 性 扩展 和 运算 符 扩 展 等 知识 点 。 


10.1 ECMAScript 函数 参数 扩展 


ECMAScript 6 语法 规范 中 为 函数 参数 扩展 了 参数 默认 值 、 不 定 参 数 和 rest 参数 等 儿 个 新 功能 ， 
以 解决 ECMAScript 早期 版 本 中 函数 参数 存在 的 问题 。 


10.1.1 ”可 变 参 数 


严格 来 说 ， 可 变 参数 是 借助 于 ECMAScript 负数 的 arguments 对 象 来 实现 的 。 通 过 使 用 可 变 参数 ， 
可 以 模拟 实现 函数 重 载 的 功能 ， 这 也 是 ECMAScript 脚本 语言 具有 “面向 对 象 ”特性 的 标志 之 一 。 
下 面 是 一 个 通过 ECMAScript 函数 的 可 变 参 数 查 询 匹 配子 字符 串 的 代码 示例 ( 详 见 源 代码 ch10 
目录 中 的 ch10-es-func-ext-varparams.html 文件 ) 。 
【代码 10-1 】 


DOTS<sceipEEYPDeenexc/ Javasceiptn> 


02 se .steTeEt 

上 区 | WE 

04 * 定义 testSubStr 函数 ,检查 是 否 包括 全 部 子 字 符 串 

05 ed 

06 Functiom testoubSte (oriStre)y | 

QT for (var i = 1; i < arguments.length; i++) { 
08 Var SubStr = arguments[i]; 

09 if (oriStr.indexOf (subStr) === -1) { 


10 return false， 
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ell } 

12 } 

3 return true; 

14 } 

bs console.log("--- Test 'AS' in ‘ECMAScript"' ---"); 

16 1 testSubSsStr (ECMAScript™r AST)) 

3 console.1og("'"'ECMAScript" includes '‘"'AS'."); 

18 else 

19 console.1log("'"'ECMAScript" does not includes 'AS'™");} 

20 console.1og(); 

之 下 console.1log("--- Test 'AS' & 'Sc' in "ECMAScript"' ---"); 

pa EstSouDtr ECM TAS oe) 

2 console. Logq("'ECMAScripEt”" Jnoeludes ASIand SC 

24 else 

2 console.10og(""ECMAScript" does not includes "AS Or SC ) < 
26 Console .1log() ; 

2 console.log("--- Test 'AS' & 'Sc"' & 'Cr' in ‘ECMAScript"' ---");} 
28 TF NESstouDoSEr (ECMASeript "Aor vocn Ch 

29 consolesliog(" ECMAScript inoludes AS TE OC Gb CE 
30 else 

3 eonsoles. Log(" "ECMASecript does nob ineoludes "ASI oe Or Cr "ys 
ZZ console.1og(); 


SS oeript> 


关于 【代码 10-1】 的 分 析 如 下 : 

第 05 一 13 行 代 码 定义 了 一 个 函数 方法 (testSubStr(oriStr)) ， 用 于 检查 某 个 原始 字符 串 中 是 否 
包括 给 定 的 子 字 符 串 (数量 是 一 个 或 多 个 ) 。 该 函数 方法 仅仅 定义 了 一 个 参数 (oriStr) ， 用 来 传 
递 原 始 字 符 串 。 那 么 如 何 传递 给 定 的 全 部 需要 检查 的 子 字符 串 呢 ? 

第 06 和 第 07 行 代码 通过 for 循环 语句 获取 了 arguments 对 象 (数组 ) 的 全 部 数组 项 , 该 arguments 
对 象 包 括 全 部 给 定 的 子 字符 串 。 

第 08 行 代码 通过 indexOfO) 函 数 方法 判断 给 定 的 子 字 符 串 是 否 包含 在 原始 字符 串 中 ， 只 要 有 一 
个 不 包括 就 返回 false。 当 全 部 包括 在 其 中 时 ， 才 会 通过 第 12 行 代码 返回 true。 

第 15 一 19、21 一 25 和 27 一 31 行 代 码 分 别 对 testSubStr(oriStr) 函 数 方法 进行 了 测试 ， 第 一 个 测 
试 方法 传递 了 两 个 参数 ， 第 二 个 测试 方法 传递 了 三 个 参数 ， 第 三 个 测试 方法 传递 了 四 个 参数 。 

运行 页 面 ， 控 制 台 输出 的 调试 信息 如 图 10.1 所 示 。 第 一 个 和 第 二 个 测试 方法 成 功 检 测 到 了 子 
字符 串 ， 第 三 个 测试 方法 提示 子 字符 串 Cr 没有 被 检测 到 。 同 时 ， 虽 然 testSubStr(oriStr) 函 数 方法 仅 
仅 定 义 了 一 个 参数 ， 但 通过 arguments 对 象 是 可 以 传 入 多 个 参数 的 。 
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中 Inspector Console Debugger Style Editor Performance Memory Network Storage 岂 " 园 目 窗 日 可 


舍 字 Filter output Persist Logs 
-- Test 'AS’ in “ECMAScript”--- ch16-es-func-ext-varparams .html :36:9 
'ECMAScCript' includes "AS ' ， ch1l10-es-func-ext-Vvarparams,htmt:38;13 

| chl0-es-func-ext-Varparams .htmti41:9 
-- Test 'AS' & 'Sc' in 'ECMAScript' --- chl0-es-func-ext-varparams,html :42:9 
‘ECMAScCript' inctudes "AS and 'Sc'. chl0-es-func-ext-varparams.html:44:13 
chl0-es-func-ext-varparams.html :47:9 

-- Test 'AS' & 'Sc' & 'Cr' in "ECMAScript' --- ch1l0-es-func-ext-Varparams ,htmt;48;9 
‘ECMAScCript' does not includes "AS' ，'Sc” or ‘Cr’ chl0-es-func-ext-varparams.html :52:13 


chl0-es-func-ext-varparams,html :S53:9 


TUTTTTTTTTOTOTO TT TT TT TTT TOTO TT TTT TOOTTTTTOOOO TT TT TT TOOT TT TT TOTTORI TPT TT TOT TTT TTT TTT 


10.1 ECMAScript 可 变 参数 


el 


第 10 章 函数 扩展 


另外 ， 虽 然 testSubStr(oriSt) 轩 数 方法 实现 了 可 变 参 数 特 性 ,但 其 可 读 性 明显 要 兰 很 多 。 因 此 ， 
ECMAScript 6 语法 规范 中 新 增 了 一 个 rest 参 数 ， 用 来 替换 可 变 参数 所 实现 的 功能 。 


10.1.2 rest 参数 


ECMAScript 6 语法 规范 中 为 函数 扩展 了 一 个 rest 参数 的 功能 ， 对 于 实现 可 变 参 数 功能 提供 了 
更 好 的 解决 方案 。 使 用 rest 参数 方法 时 ， 该 参数 一 定 要 放 在 参数 列表 的 末尾 ， 且 必须 使 用 连续 3 
个 小 数 点 符号 〈…) 开头 。 使 用 rest 参数 方法 的 代码 可 读 性 更 好 ， 同 时 解决 了 对 arguments 对 象 依 
赖 的 问题 。 

下 面 是 一 个 根据 【代码 10-1】 改 写 而 成 、 基 于 rest 参数 方法 的 代码 示例 〈 详 见 源 代码 ch10 日 
录 中 的 ch10-es-func-ext-rest.html 文件 ) 。 

【代码 10-2】 


01 <script type="text/javascript"> 


02 use strict,s 

03 二 

04 * 定义 testSubStr 函数 ， 检 查 是 否 包 括 任意 一 个 子 字符 串 

05 ep 

06 FUnceTion estoubStr (oriStre ard 

07 let brFrind = false; 

08 For (let suet oF ss 1 

09 if (oriStr.indexOf (subStr) !== -1) 1{ 

J aeonsoleolog( Eng TsunSGe Et 

bl brFind = true; 

1 be } 

3 } 

14 return bFind; 

有 } 

16 console.1log("--- Test '‘'AS' in ‘ECMAScript"' ---"); 

Ib If (testSoubStr ("ECMASCript", "AS™)) 

18 console.lLog(""ECMAScript” jincludes "AS"."); 

| else 

20 console.l1log("'"'ECMAScript"' does not include 'AS'"); 

21 console.log("--- Test ‘aS' or '‘'sC' in ‘ECMAScript"' ---"); 

2 EeesEcouoscE RECMRSCTT ESSS SC 

23 econsoleeLlogq( ECMASeripG nceludes a Or SC > 

24 else 

pd) eoOonsole Loq( "ECMASCPIPDE doesg no nelude as OF "SC 2 
26 console.log("--- Test 'AS' & 'Sc"' & 'Cr"' in ‘'ECMAScript"' ---");} 
2 ESESDDSEE (TECMASCripES TAST "SoGr "Cen 

28 console log "ECMAScript Tnoludes AS SOc Or Cr ems 

之 对 else 

30 console. Iog("'ECMAScript" does not ineolude ao "Se or Ce")s 
3 本 console.1o0g(); 


S20 LE> 


关于 【代码 10-2】 的 分 析 如 下 : 
第 06 一 15 行 代 码 定义 了 一 个 testSubStr(oriStr, ...args) 函 数 。 注 意 , 该 函数 的 第 二 个 参数 “...args” 
开始 的 连续 3 个 小 数 点 符号 〈.) 表明 该 参数 是 一 个 rest 参数 。 男 外 ， 在 testSubStrO 国 数 内 定义 了 
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一 个 布尔 值 标 记 ， 作 为 函数 的 返回 值 。 

【代码 10-2】 与 【代码 10-1】 主 要 的 区 别 就 是 ，【 代 码 10-2】 是 检查 源 字 符 串 中 是 耕 包 括 任 
意 一 个 定义 的 子 字 符 串 ， 只 要 包括 任意 一 个 就 返回 tue， 部 不 包括 才 会 返回 false。 

运行 页 面 ， 控 制 台 输出 的 调试 信息 如 图 10.2 所 示 。 从 浏览 器 控制 台中 输出 的 结果 来 看 ，rest 
参数 与 可 变 参数 功能 一 样 ， 很 好 地 解决 了 ECMAScript 函数 中 可 变 参 数 的 问题 。 


NS 
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[Ca Inspecto Consok Debugge Style Editc Performant Memor Networ| Storagt 轩 ~" 园 由 窗 口 可 


价 时 Filter output _] Persist Logs 
--- Test 'AS” in “ECMAScript” --- ch16-es-func-ext-rest,htmt;37;9 
fand "AS” 。。。 chl0-es-func-ext-rest.html:3]1:2]1 
ECMAScript' inctudes 'AS'. chi0-es-func-ext-rest.html :39:13 

chlO-es-func-ext-rest,html:42:9 

-- Test 'aS’' or 'SC” in “ECMAScript” --- chl0-es-func-ext-rest.html:43:9 

"ECMAScript' does not inctude 'aS' or 'sC', ch16-es-func-ext-rest.htmt;47:13 

ch1l16-es-func-ext-rest,htmLi486;9 

-- Test 'AS' & 'Sc' & 'Cr’' in ‘ECMAScript' --- chlO-es-func-ext-rest.html:49:9 

find “AS” ...。 ch1l6-es-func-ext-rest.htmti31:21 

finmd "Se" 。。。 chl6-es-func-ext-rest.htmt;31:21 

“ECMAScript” includes 'AS', 'Sc' or ‘'Cr'. ch1l16-es-func-ext-rest.htmt:51:13 

| chliO-es-func-ext-rest,html:54:9 
poe ethene 

»》 i 


10.2 ” ECMAScript 中 rest 参数 的 应 用 


10.1.3 ”参数 默认 值 


ECMAScript 6 语法 规范 中 新 增 了 关于 “参数 上 默 认 值 ”的 概念 ， 为 没有 传递 参数 值 的 函数 方法 
提供 了 避免 错误 的 解决 方案 。 其 实 , 在 ECMAScript 语法 规范 中 还 没有 “参数 默认 值 ” 这 个 方式 时 ， 
设计 人 员 均 会 采用 编写 代码 的 方式 为 参数 传递 类 认 值 , 这 样 就 会 避免 出 现 不 可 预知 的 代码 解析 异常 
问题 。 

下 面 先 看 一 个 如 何 通 过 人 工 方式 实现 参数 坝 认 值 的 代码 示例 〈 详 见 源 代码 ch10 目录 中 的 
ch10-es-func-ext-params-manual.html 文件 ) 。 

【代码 10-3 】 


01 <script type="text/javascript"> 


人 之 hl = er ed 

BE 1 本 

04 * 定义 rectArea 函数 ， 计 算 和 矩形 的 面积 

QS EW 

06 function rectArea(length, width) { 

0 length = length || 0; 

08 width = width || 0; 

09 return length * width; 

10 } 

1 console.log("--- rectArea() ---"); 

1 console.log("rectArea() = " + rectArea()); 

13 console.]log("--- rectArea(30) ---"); 

14 console.log("rectArea(30) = " + rectArea(30)); 
号 Console .1og ("--- rectArea(30, 60) ---"); 

16 console.log("rectArea(30, 60) = " + rectArea(30, 60)); 


I /oh oul oh es 
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关于 【代码 10-3】 的 分 析 如 下 : 

第 06 一 10 行 代 码 定义 了 一 个 rectArea(length, width) 函 数 方 法 ， 用 于 计算 和 矩形 的 面积 。 

第 07 和 第 08 行 代码 通过 “或 ”运算 为 参数 length 和 width 传递 了 默认 值 ， 这 两 行 代码 的 处 理 
方式 就 是 人 工 定义 参数 默认 值 的 方法 。 

第 09 行 代码 将 计算 的 矩形 面积 值 进行 返回 。 

运行 页 面 , 控制 台 输 出 的 调试 信息 如 图 10.3 所 示 。 即 使 调用 rectArea(length, width) 函 数 方法 时 
未 定义 默认 参数 值 ， 也 一 样 可 以 得 出 矩形 面积 的 默认 值 。 





Developer Tools - ECMAScript in 15-days - http://localhost:63 
a Inspect Conso Debugc Style Ed Performa Memc Netwc Storat 团团 目 窜 日 可 


闸 富 Filter output | Persist Logs 
-- rectArea() --- “Xt-params-manual .html :32:9 
rectArea() = 0 "exXt-params -manual .html :33:9 
-- rectArea(30) --- -EXt-params -manual .html:34:9 
rectArea(30) = 0 "Xt-params-manual .html :35:9 
-- rectArea(30, 60) --- -eeX 世 -params -manual .html :36:9 


ee 


aa 


rectArea(30, 60) = 1866 -=eX 世 -params -manual .htnmt:37:9 


TT 


10.3 ”人 工 方式 的 参数 默认 值 


下 面 再 看 一 个 在 ECMAScript 6 语法 规范 中 使 用 参数 默认 值 的 代码 示例 ( 详 见 源 代 人 码 ch10 日 
录 中 的 ch10-es-func-ext-params-default.html 文件 ) 。 
【代码 10-4】 


0 
02 
03 
04 
Vs 
06 
07 
08 
bs, 
10 


<script type="text/javascript"> 
"Use Srliee's 


/* 


* 定义 rectArea 函数 ,计算 矩形 的 面积 


A 


function rectArea(length=100, width=100) { 
return length * width; 


} 


console. 
console. 
console. 
console. 
console. 
console. 


</goript> 


log("--- rectArea() ---"); 
log("rectArea() = " + rectArea()); 
log("--- rectArea(50) ---"); 


log("rectArea(50) = " + rectArea(50)); 
log("--- rectArea(30, 60) ---"); 
log ("rectArea(30, 60) = " + rectArea(30, 60)); 


关于 【代码 10-4】 的 分 析 如 下 : 

第 06 一 08 行 代码 定义 了 一 个 rectArea(length, width) 函 数 方法 ， 用 于 计算 矩形 的 面积 。 在 06 行 
函数 方法 的 定义 中 ， 直 接 为 参数 定义 了 默认 参数 值 length=100、width=100， 这 就 是 ECMAScript 6 
语法 规范 中 参数 默认 值 的 定义 方法 。 

第 07 行 代码 返回 计算 的 窍 形 面积 值 。 

运行 页 面 ， 控 制 台 输出 的 调试 信息 如 图 10.4 所 示 。 从 浏览 器 控制 台中 输出 的 结果 来 看 ， 
ECMAScript 6 语法 规范 中 的 参数 默认 值 方式 与 人 工 默认 参数 方式 (参考 图 10.3) 的 功能 是 一 致 的 ， 
但 参数 默认 值 方式 明显 更 为 简洁 。 
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从 是 Filter output (| Persist Logs 
-- rectArea() --- ~ext-params-default.html :30:9 
rectArea() = 100060 “ext-params-default.html:31:9 
-- _ rectAreal(50) --- ~ext-params-default.html :32:9 
| rectArea(56) = S56060 ~ext-params-default.html :33:9 
-- rectArea(30, 60) --- “ext-params-default.html :34:9 
rectArea(30, 60) = 1866 "ext-params-default.html:35:9 

>| | 


10.4 ECMAScript 6 参数 默认 值 方式 


10.1.4 省略 参 数 默 认 值 的 正确 方式 


ECMAScript 6 语法 规范 中 新 增 的 参数 默认 值 固 然 非常 好 用 ， 但 使 用 方式 不 当 也 会 带 来 错误 问 
题 。 产 生 错 误 的 原因 主要 是 由 于 “ 非 尾 部 的 参数 默认 值 ? 无 法 省 略 ， 而 且 在 实际 应 用 中 也 很 难 注 意 
到 这 个 问题 。 

下 面 看 一 个 关于 省 略 参数 默认 值 的 代码 示例 〈 详 见 源 代 码 ch10 目录 中 的 ch10-es-func-ext- 
params-default-right.html 文件 ) 。 

【代码 10-5 】 


01 <script type="text/javascript"> 


02 Hh hh py sie er 

由 

04 * 定义 rectArea 函数 ,计算 矩形 的 面积 

05S a 

06 function rectArea(length=100, width=100) { 

07 return length * width; 

08 } 

09 console.1log("--— rectArea(60, ) ---"); 

10 console.log("rectArea(60, ) = " + rectArea(60, )); 


rp 


关于 【代码 10-5】 的 分 析 如 下 : 

第 06 一 08 行 代码 定义 了 一 个 rectArea(length=100, width=100) 函 数 方法 , 用 于 计算 和 矩形 的 面积 ， 
这 个 函数 与 【代码 10-4】 中 的 定义 是 完全 相同 的 。 

第 09 和 第 10 行 代码 直接 调用 rectArea(60, ) 图 数 。 注 意 ， 这 里 省 略 了 第 二 个 参数 的 默认 值 。 

运行 页 面 ， 控 制 台 输出 的 调试 信息 如 图 10.5 所 示 。 省 略 了 第 二 个 参数 的 默认 值 且 获 取 了 默认 
值 100， 同 时 也 得 出 正确 的 计算 结果 。 

如 果 尝 试 在 【代码 10-5】 中 省 略 第 一 个 参数 的 默认 值 ， 那 么 会 得 到 同样 的 效果 吗 ? 


Developer Tools - ECMAScript in 15-days - http://localhost:63342/W 
a Inspectc Consol Debugge Style Edit Performan, Memor Networ Storag 回 - 园 日 宗 日 口 





会 时 Filter output | PersistLogs 
-- rectArea(60, ) --- ~params-default-right.html:30:9 
rectArea(60, ) = 6000 ~params-default-right.html:3]1:9 

S| 


10.5 ” ECMAScript 6 省 略 参数 默认 值 的 正确 方式 (1) 
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下 面 继续 看 一 个 将 【代码 10-5】 稍 作 修 改 后 的 代码 示例 〈 详 见 源 代 人 码 ch10 目录 中 的 
chl0-es-func-ext-params-default-right.html 文件 ) 。 
【代码 10-6】 


01 <script type="text/javascript"> 


02 hr seh ee 

El 2 

04 * 定义 rectArea 函数 ,计算 矩形 的 面积 

05 a 

06 function rectArea(length=100, width=100) { 

07 return length * widthy” 

08 } 

09 console.log("--—- rectArea(, 60) ---"); 

10 console.log("rectArea(, 60) = " + rectAreal(, 60)); 


Tceipt> 


关于 【代码 10-6】 的 分 析 如 下 : 

这 段 代 人 码 与 【代码 10-5】 唯 一 的 不 同 就 是 省 略 了 第 一 个 参数 的 默认 值 ， 而 没有 省 略 第 二 个 参 
数 的 默认 值 。 

运行 页 面 ， 控 制 台 输出 的 调试 信息 如 图 10.6 所 示 。 在 省 略 了 第 一 个 参数 的 默认 值 而 没有 省 略 
第 二 个 参数 的 默认 值 后 ， 浏 览 器 控制 台 调 试 器 提示 了 错误 。 





Developer Tools - ECMAScript in 15-days - http://ocalhost:63342/WebstormpPro 


[Ca Inspector Console Debugger Style Editor Performance Memory Network Storage 轩 ~" 园 目 窜 日 可 


从 时 Filter output _| Persist Logs 
A SyntaxError: expected expression, got ',' Ilearn More] .ext-params-default-right.html :33:51 


Bnsensnssnsnssnensensns ensnssnennsnnn nessnsnnenann nasenasnenaenAn nnn snesnnenanenanens nanasnenan ananassae Amn Ansan nA ARAN AnARAnAR ARAN RSNA AR A 


10.6” ECMAScript 6 省 略 参 数 默认 值 的 正确 方式 (2) 


如 何 避 免 出 现 省 略 “ 非 尾部 的 参数 默认 值 ” 产 生 的 错误 呢 ? 
下 面 继 续 看 一 个 将 【代码 10-6】 稍 作 修改 后 的 代码 示例 〈 详 见 源 代码 ch10 目录 中 的 
ch10-es-func-ext-params-default-right.html 文件 ) 。 
【代码 10-7】 


01 <script type="text/javascript"> 


人 之 se atelet 

03 We 

04 * 定义 rectArea 函数 ,计算 矩形 的 面积 

0 王 EW 

06 function rectArea(length=100, width=100) { 

07 return length * width; 

08 } 

09 Console .1og ("--- rectArea (undefined, 60) ---"); 

1 console.log("rectArea (undefined, 60) = " + rectArea (undefined, 60)); 


I lp 


关于 【代码 10-7】 的 分 析 如 下 : 
这 段 代 人 码 与 【代码 10-6】 唯 一 的 不 同 就 是 ， 将 省 略 的 第 一 个 参数 默认 值 设 置 为 了 特殊 值 


undefined。 
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运行 页 面 ， 控 制 台 输出 的 调试 信息 如 图 10.7 所 示 。 在 将 省 略 的 第 一 个 参数 默认 值 蔡 换 为 特殊 
值 undefined 后 ， 得 到 了 正确 的 计算 结果 。 


Developer Tools - ECMAScript in 15-days - http://localhost:63342/Webstorm 





[a Inspector Console Debugger Style Editor Performance Memory Network Storage 轩 " 园 目 崔 口 了 可 


闪 时 Filter output _| Persist Logs 
-- rectArea(undefined, 60) --- “ext-params-default-right.html:34:9 
rectArea(undefined, 60) = 6000 "~ext-params-default-right.html:35:9 

| 


Dananeneenenenens eensnene nn nn nn 


10.7 ECMAScript6 省 略 参数 默认 值 的 正确 方式 (3) 


10.2 length 属性 扩展 


ECMAScript 6 语法 规范 中 为 ECMAScript 图 数 的 length 属性 扩展 了 定义 ， 用 来 增强 length 属 
性 的 用 途 。 


10.2.1 参数 默认 值 方式 下 的 length 属性 


我 们 知道 通过 ECMAScript 函数 的 length 属性 可 以 返回 参数 的 数量 。 如 果 指 定 了 参数 的 默认 值 ， 
length 属性 就 会 忽略 这 些 已 经 指定 了 默认 值 的 参数 。 
下 面 是 一 个 在 定义 了 参数 默认 值 后 获取 length 属性 的 代码 示例 ( 详 见 源 代码 ch10 目录 中 的 
ch10-es-func-ext-length-default.html 文件 ) 。 
【代码 10-8】 


01 <script type="text/javascript"> 


02 ise 

03 * ECMAScript 函数 length 属性 

04 ea 

加 本 console.log("func length() length : "); 

06 console.log((function func length() {}) .length); 

(OM console.log("func length(a) length : "); 

08 console.log( (function func length(a) {}) .length); 

09 console.log ("func length(a, = Longehe: > 

10 console.log( (function func length(a, b = 1) {}).length); 


SC 


关于 【代码 10-8】 的 分 析 如 下 : 

第 05 和 第 06 行 代码 测试 了 函数 无 参数 时 的 length 属性 值 。 

第 07 和 第 08 行 代码 测试 了 函数 市 参数 时 的 length 属性 值 。 

第 09 和 第 10 行 代码 测试 了 函数 参数 带 睦 认 值 时 的 length 属性 值 。 

运行 页 面 , 控制 台 输 出 的 调试 信息 如 图 10.8 所 示 。 夺 函数 参数 定义 了 上 默认 值 ， 则 在 使 用 length 
属性 时 是 不 计 入 函数 参数 数量 的 。 
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Developer Tools - ECMAScript in 15-days - http://localhost:633 
[a Inspect Conso Debugc Style Edi Performa Memo Netwo Storac 轩 " 园 目 惟 日 吕 


商 时 Filter output | Persist Logs 
func length() Length : ~CXxt-length-default.html:26:3 
| 。 ext- h-def html :27: 
func length(a) length : “ext-length-default.html:28:9 
1 ~ext-length-default .html:29:9 
func length(a, b = 1) Length : ~ext-Llength-default.html:30:9 
1 ~ext-length-default.html:3]1:9 
>| 


emsenseneensnnensensnnt nen mmm ni ii i ii nnn i 


10.8 ECMAScriptlength 属性 扩展 (1) 


rest 参数 方式 下 的 length 属性 


奇 ECMAScript 图 数 使 用 了 rest 参数 的 方式 , 则 length 属性 同样 会 忽略 已 经 指定 了 默认 值 的 参 

数 ， 这 主要 因为 length 属性 表示 该 图 数 预期 传 入 的 参数 个 数 。 

下 面 是 一 个 在 rest 参数 默认 值 方式 下 获取 length 属性 的 代码 示例 《〈 详 见 源 代码 ch10 目录 中 的 

chl0-es-func-ext-length-rest.html 文件 ) 。 
【代码 10-9】 


01 
02 
U3 
04 
05 
06 
07 


<script type="text/javascript"> 


/* 

* ECMAScript 函数 length 属性 

SR 
console.log ("func length(...args) length : "); 
console.log((function func length(...args) {}).1length); 
console.log ("func length(a, .,...args) length : "); 
console .log((function func length(a, ...args) {}).length); 
eonsole.log("func Length(ar Dro args) length — )» 
console.log((function func length(a, b, ...args) {}) .Length) ， 

< /aceript> 


关于 【代码 10-9】 的 分 析 如 下 : 

这 段 代 码 主要 测试 了 在 使 用 rest 参数 的 方式 下 length 属性 的 取 值 情况 。 

运行 页 面 ， 控 制 台 输 出 的 调试 信息 如 图 10.9 所 示 。 大 函数 参数 使 用 了 rest 参数 方式 ， 则 在 使 
用 length 属性 时 rest 参数 同样 是 不 计 入 函数 参数 数量 的 。 


Developer Tools - ECMAScript in 15-days - http://localhost:63342/W 





a Inspectc Consol Debugge Style Edit PerForman Memor Networ Storag 半 " 园 日 窗口 可 


人 疹 守 Filter output [_ J) Persist Logs 
func length(...args) length : ~func-ext-length-rest.html:26:9 
6 “func-ext-length-rest.html:27:9 
func length(a, ...args) Length : “func-ext-length-rest.html:28:9 
| 1 “~func-ext-length-rest.html:29:9 
func length(a, b, ...args) Length : “func-ext-length-rest.html:30:9 
2 ~func-ext-length-rest.html:31:9 

>| 


10.9 ” ECMAScript length 属性 扩展 (2) 
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10.2.3 ”参数 默认 值 不 同位 置 下 的 length 属性 


前 面 介 绍 了 如 果 在 指定 了 参数 的 默认 值 后 ，length 属性 就 会 忽略 这 些 已 经 指定 了 默认 值 的 参 
数 。 同 时 ， 如 果 参 数 默 认 值 定义 在 不 同 的 位 置 ， 就 会 影响 到 length 属性 对 后 面 参数 的 计数 。 
下 面 是 一 个 参数 默认 值 在 不 同位 置 下 使 用 length 属性 的 代码 示例 ( 详 见 源 代 码 ch10 目录 中 的 
ch10-es-func-ext-length-params.html 文件 ) 。 
【代码 10-10】 


01 
2 
Wa 
04 
05 


<script type="text/javascript"> 


/* 


* ECMAScript 函数 length 属性 


和 


console. 
console. 
console. 
console. 
console. 
console. 


ssSeeTDE> 


1og("func length num(a=1，b，c) length : "); 
ioog(Euncticone Eunc Tength first(a=1l ncJJengtch) 
log ("func length second(a, b=2, c) length : "); 
log((function func length second(a, b=2, c) {}) .length); 
log("func length thirdlar br C=3)° length ")s 
log((function func length third(a, b, c=3) 1{}).length); 


关于 【代码 10-10】 的 分 析 如 下 : 

这 段 代 码 主要 测试 了 参数 默认 值 在 不 同位 置 时 length 属性 的 取 值 情况 。 

运行 页 面 ， 控制 台 输 出 的 调试 信息 如 图 10.10 所 示 。 大 函数 的 参数 堆 认 值 没 有 定义 在 参数 序列 
的 结尾 ， 则 length 属性 会 将 后 面 的 参数 不 做 计数 。 





Developer Tools - ECMAScript in 15-days - http://localhost:63342/Webst 


[a Inspecto Console Debugge Style Edito Performanc Memor Networl Storage 团 " 园 目 崔 口 了 可 


价 时 Filteroutput Persist Logs 
func length num(a=l1, b, c¢) Length : “func-ext-length-params.html:26:9 

9 ~func-ext-length-params.html:27:9 
func length second(a, b=2, ¢) Length : “func-ext-length-params.html :28:9 

1 “func-ext-length-params.html:29:9 

| func length third(a，b，c=3) Length : “func-ext-length-params .html ;30:9 
2 “func-ext-length-params.html:31:9 


Deesensensensemneensens 





图 10.10 ” ECMAScript length 属性 扩展 (3) 


10.3 name 属性 扩展 


ECMAScript 6 语法 规范 中 为 ECMAScript 函数 的 name 属性 扩展 了 定义 ， 虽 然 从 ECMAScript 
早期 版 本 开始 已 经 开始 文 持 name 属性 了 , 但 直到 ECMAScript 6 版 本 开始 才 将 name 属性 写 入 正式 


标准 。 


一 般 来 说 ， 通 过 name 属性 可 以 获取 ECMAScript 函数 的 名 称 。 另 外 ， 在 使 用 匿名 函数 的 情形 
下 ， 早 期 版 本 只 会 返回 一 个 空 字符 串 。 
下 面 是 一 个 使 用 name 属性 获取 函数 名 称 的 代码 示例 〈 详 见 源 代码 ch10 目录 中 的 
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chl0-es-func-ext-name.html 文件 ) 。 
【代码 10-11 】 


01 <script type="text/javascript"> 


02 USeESEETCE 

03 

04 * ECMAScript 函数 扩展 --- name 属性 

05 ee 

06 function func name() {} 

QO console.10g("--— function func name() {} -=—"); 
08 console.log (func name.name); 

09 var f name = function () {}; 

10 console.log("--- f name = function () {} ---—"); 
| console .log (E_name .name) ; 


2 /geript> 


关于 【代码 10-11】 的 分 析 如 下 : 

第 06 行 代码 定义 了 第 一 个 函数 func_name()， 并 在 第 08 行 代码 中 通过 函数 名 调用 了 name 属性 。 

第 09 行 代码 定义 了 第 二 个 函数 (匿名 函数 ) ， 并 赋值 给 了 变量 f name; 第 11 行 代码 中 通过 
变量 f name 调用 了 name 属性 。 

运行 页 面 ， 控 制 台 输出 的 调试 信息 如 图 10.11 所 示 。 通 过 函数 名 称 ( 匿 名 函数 通过 变量 名 ) 调 
用 name 属性 ， 可 以 获取 该 函数 的 名 称 。 





Developer Tools - ECMAScript in 15-days - http://localhost:63342/\ 


[a Inspectc Consol Debugg' Style Edit Performan Memor Networ Storag 加 7 园 日 农 口 0 


闸 时 Filter output [| Persist Logs 
| -- function func name() {} --- chlO0-es-func-ext-name.html:28:9 
func name chl0-es-func-ext-name.html:29:9 
-- f name = function () {} --- chlO-es-func-ext-name.html :31:9 
f name chl0-es-func-ext-name.html :32:9 

>| 


Danemanensnenannan snanannnnnnanannannnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnannnnnnnnnnnnnnnn 


10.11 ECMAScript name 属性 扩展 


10.4 ”和 苗头 孙 数 


ECMAScript 6 语法 规范 中 新 增加 了 一 个 比较 有 意思 的 箭头 函数 功能 , 用 来 扩展 对 ECMAScript 
函数 的 使 用 方式 。 


10.4.1 王 头 函数 的 基本 形式 


ECMAScript 6 版 本 设计 的 稍 头 函数 的 样式 看 起 来 有 避 怪 ， 但 丝 坚 不 影响 其 功能 的 强大 。 租 头 
函数 的 基本 语法 形式 如 下 : 

var 函数 名 = (参数 ) => {函数 体 } ”// 注意 "=>" 符号 的 使 用 

该 语法 形式 大 致 描述 了 箭头 函数 的 样式 ， 总 体 还 包括 了 函数 定义 的 一 些 基 本 元 素 〈 如 函数 名 、 
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参数 和 图 数 体 ) 。 另 外 ， 和 荫 头 函数 在 具体 使 用 时 很 灵活 ， 可 以 表现 为 多 种 样式 。 

下 面 是 一 个 使 用 ECMAScript 箭头 图 数 基 本 形式 的 代码 示例 《〈 详 见 源 代 码 ch10 目录 中 的 
ch10-es-func-ext-arrow-basic.html 文件 ) 。 

【代码 10-12】 


01 <script type="text/javascript"> 


02 "Se Strict 

03 WS 

04 * ECMAScript 函数 

05 < 

06 tunetion funeobasie(ph rl 

07 return p; 

08 } 

09 Var Vv = func basic("ECMAScript"); 

10 ConsolecoogltuncioasTcC YY 

a bl VW 

12 * ECMAScript 函数 扩展 --- 箭头 函数 

i 

14 Var func arrow basic = p => p; 

LS var a = func arrow basic("ECMAScript"); 
16 console liogq( funcenareomoasne -YE De 


I heh el le 


关于 【代码 10-12】 的 分 析 如 下 : 

第 06 一 08 行 代码 定义 了 一 个 普通 函数 func basic()， 第 09 一 10 行 代码 是 对 该 函数 的 调用 。 

第 14 行 代 码 定 义 了 一 个 箭头 函数 : 函数 名 为 func arrow_basic， 参 数 为 p， 函 数 体 为 返回 参数 p。 

第 15 行 代码 是 对 箭头 函数 的 调用 ， 与 第 09 行 代码 定义 的 普通 函数 的 调用 方式 是 一 致 的 。 

运行 页 面 ， 控 制 台 输出 的 调试 信息 如 图 10.12 所 示 。 从 浏览 器 控制 台 输 出 的 结果 来 看 ， 第 14 
行 代码 定义 的 箭头 图 数 func_arrow_basic()， 在 功能 上 完全 等 同 于 第 06 一 08 行 代 码 定义 的 一 个 普通 
阔 数 func basic()。 


Developer Tools - ECMAScript in 15-days - http://localhost:63342/' 





[a Inspect¢ Consol Debuggt Style Edit Performan Memor Networ Storag ~" 轩 目 岂 日 可 


会 时 Filter output [JPersist Logs 

func basic : ECMAScript “func-ext-arrow-basic,.html:31:9 
| func arrow basic : ECMAScript “func-ext-arrow-basic.htmtl:37:9 
> 


10.12 ” ECMAScript 箭头 函数 (1) 


10.4.2 ”和 蓟 头 函数 的 参数 


如 果 定 义 的 芋头 函数 不 带 参 数 或 多 于 一 个 参数 时 ， 束 要 使 用 小 括号 “0 ”将 参数 包括 进去 。 只 
有 在 仅仅 定义 了 一 个 参数 的 情况 下 才 可 以 省 略 小 括号 ， 如 【代码 10-12】 中 箭头 函数 的 定义 。 
下 面 是 一 个 使 用 ECMAScript 荫 头 图 数 时 不 帝 参 数 的 代码 示例 《〈 详 见 源 代 码 ch10 目录 中 的 


ch10-es-func-ext-arrow-noparam.html 文件 ) 。 


pp ps 
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【代码 10-13 】 


01 <script type="text/javascript"> 


02 se SEPnet 

Wa ee 

04 * ECMAScript 函数 扩展 --- 箭头 函数 

05 a 

06 Var func arrow noparam = () => "ECMAScript"; 
岂可 var n = func arrow noparam(); 

08 console.log("func arrow noparam: tn): 


9 </seeint> 


关于 【代码 10-13】 的 分 析 如 下 : 

第 06 行 代码 定义 了 一 个 箭头 函数 : 函数 名 为 func_ arrow_noparam， 参 数 为 一 个 空 括号 (表示 
无 参数 ) ， 函 数 体 为 直接 返回 一 个 字符 串 。 
运行 页 面 ， 控 制 台 输出 的 调试 信息 如 图 10.13 所 示 。 





Developer Tools - ECMAScript in 15-days - http://localhost:63 


[a Inspec! Consc Debugc Style Ed Performa Memo Netwc Storat 轩 " 园 目 容 日 可 I 


商 时 Filter output (_) Persist Logs 
func arrow noparam : ECMAScript “ext-arrow-noparam.html:29:9 


10.13 ” ECMAScript 箭头 函数 (2) 


下 面 是 一 个 使 用 ECMAScript 第 头 函数 时 市 多 个 参数 的 代码 示例 ( 详 见 源 代码 ch10 目录 中 的 
ch10-es-func-ext-arrow-params.html 文件 ) 。 
【代码 10-14】 


01 <script type="text/javascript"> 


02 Use sate tr 

JS | 和 

04 * ECMAScript 函数 扩展 --- 箭头 函数 

05 Ep 

06 Var func arrow params = (a, b) => aa + b; 

07 var s = func arrow params ("Hello", “ECMAScript"); 
08 console.log ("func arrow params : " + s); 

09 var n = func arrow params (1, 2); 

10 Sonsoles log( EuoncEarnowacamnmns ne 


> 


关于 【代码 10-14】 的 分 析 如 下 : 

第 06 行 代 码 定 义 了 一 个 箭头 图 数 : 图 数 名 为 func_arrow_params， 参 数 为 (a, b)， 函 数 体 为 返回 
两 个 参数 的 和 运算 (a+b) 。 

第 07 行 代 码 是 对 箭头 函数 的 一 个 调用 ， 参 数 为 两 个 字符 串 。 

第 09 行 代码 是 对 箭头 函数 的 另 一 个 调用 ， 参 数 为 两 个 数值 。 

运行 页 面 ， 控 制 台 输 出 的 调试 信息 如 图 10.14 所 示 。 从 浏览 器 控制 台 输 出 的 结果 来 看 ， 箭 头 函 
数 的 参数 对 于 字符 串 和 数字 都 是 可 以 满足 的 。 
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Developer Tools - ECMAScript in 15-days - http://localhost 





[a Inspec Consc Debug Style Ed Perform: Memc Netw' Stora 回 * 园 日 闷 日 上 口 


将 时 Filteroutput _] Persist Logs 
func arrow params : HeLLOECMAScript -ext-arrow-params ,htmti29;9 
func arrow params ; 3 ~eXxXt-arrow-params.html :31:9 

>| 


10.14 ECMAScript 箭头 函数 (3 ) 


10.4.3 ”和 荫 头 函数 的 函数 体 


如 果 定 义 的 箭头 函数 的 函数 体 含 有 多 条 语句 ， 就 要 使 用 大 括号 “人 和 ”将 语句 块 包括 进去 。 

下 面 是 一 个 使 用 ECMAScript 箭头 图 数 时 不 带 参 数 的 代码 示例 〈 详 见 源 代 码 ch10 目录 中 的 
ch10-es-func-ext-arrow-body.html 文件 ) 。 

【代码 10-15】 


01 <script type="text/javascript"> 


02 "USe strict"; 

03 VY 

04 * ECMAScript 函数 扩展 --- 箭头 函数 

JE et 

06 Var func arrow body = (a, b) => {var s =a + b; return s;} 
Om var s = func arrow body("Hello", "ECMAScript"); 

08 console. Log( Eunc arrom body ES 

09 Var n = func arrow body(l1l, 2); 

10 console. log ("func arrow body : "Tn): 


T1093 cript> 


关于 【代码 10-15】 的 分 析 如 下 : 

第 06 行 代码 定义 了 一 个 箭头 函数 : 函数 名 为 func arrow body， 参 数 为 (ab)， 函 数 体 使 用 大 
括号 “{}” 定 义 了 一 个 语句 块 (包含 变量 定义 及 “+” 运 算 符 的 运算 、 计 算 结 果 的 返回 等 语句 〉。 

运行 页 面 ， 控 制 台 输出 的 调试 信息 如 图 10.15 所 示 。 





Develtoper Tools - ECMAScript in 15-days - http://localhost:63342 


a Inspect Conso Debugg Style Edit Performar Memol Netwo Storac 回 - 园 日 宗 日 加 


会 时 Filter output | Persist Logs 
func arrow body : HelloECMAScript “func-ext-arrow-body.html :29:9 
func arrow body : 3 -<func -ext-arrow-body .htmt:31:9 

>| 


10.15 ECMAScript 箭头 函数 (4) 


10.5 “箭头 函数 扩展 应 用 


ECMAScript 6 语法 规范 中 新 增 的 箭头 函数 具有 很 多 的 使 用 方式 ， 可 以 扩展 出 很 简洁 且 强 大 的 


第 10 章 函数 扩展 


10.5.1 箭头 函数 计算 工具 


通过 编写 一 行 箭头 函数 的 代码 ， 就 可 以 实现 传统 方式 下 编写 好 几 行 代码 才能 实现 的 功能 。 例 
如 ， 可 以 通过 篆 头 函数 编写 出 很 实用 的 简单 计算 工具 。 

下 面 是 一 个 使 用 ECMAScript 箭头 函数 编写 简单 计算 工具 的 代码 示例 〈 详 见 源 代码 ch10 目录 
中 的 ch10-es-func-ext-arrow-cal.html 文件 ) 。 

【代码 10-16】 


01 <script type="text/javascript"> 


02 "Sa SErioE 

03 We 

04 * ECMAScript 箭头 函数 --- 计算 矩形 面积 工具 

05 ey 

06 Var func arrow rect = (ll, w) => 1 * w; 

07 var areaRect = func arrow rect (6, 3); 

08 console .1og (" 和 矩形 面积 工具 : func arrow rect(6, 3) = " + areaRect); 
09 fae 

10 * ECMAScript 箭头 函数 --- 计算 圆 面 积 工具 

Tl 2 

1 varyfuncelarrow clireler = => (MathePT ror ER torized(l2) 

1 var areaCircle = func arrow circle(5); 

14 console .1og (" 圆 形 面积 工具 : func arrow circle(5) = " + areaCircle); 
15 | 

16 * ECMAScript 箭头 函数 --- 计算 余数 工具 

开交 0 

ES var func arrow remainder = (i, j) => i $%$ j; 

EE var rd = func arrow remainder(8, 5); 

20 console .1og ("计算 余数 工具 : func arrow remainder(8, 5) = " + rd); 


ZTE </acreipt> 


关于 【代码 10-16】 的 分 析 如 下 : 

第 06 行 代码 定义 了 一 个 计算 矩形 面积 的 第 头 函 数 func_arrow_rect()， 第 07 和 第 08 行 代码 是 
对 该 函数 的 调用 。 

第 12 行 代码 定义 了 一 个 计算 圆 形 面 积 的 箭头 函数 func_arrow_circle0, 第 13 和 第 14 行 代码 是 
对 该 函数 的 调用 。 

第 18 行 代码 定义 了 一 个 计算 余数 的 箭头 函数 func_arrow_remainder()， 第 19 和 第 20 行 代 码 是 
对 该 函数 的 调用 。 

运行 页 面 ， 控 制 台 输 出 的 调试 信息 如 图 10.16 所 示 。 通 过 使 用 一 行 箭头 函数 代码 就 可 以 实现 传 
统 函 数 方式 好 几 行 代码 才能 实现 的 功能 ， 箭 头 函数 的 简洁 性 和 高 效 性 十 分 明显 。 





Developer Toolts - ECMAScript in 15-days - http://ocalhost:633427We 


Ca Inspectc Consol Debugge Style Edit' Performan' Memor Networ Storag 轩 " 园 目 肉 日 可 


闸 时 Filter output Persist Logs 
| 矩形 面积 工具 ; func arrow rect(6, 3) = 18 -es-func-ext-arrow-cat,htmt:29;9 
图 形 面积 工具 : func arrow circle(5) = 78.54 -es-func-ext-arrow-cat.htmt:35:9 
计算 余数 工具 : func_arrow_remainder(8，5) = 3 “es-func-ext-arrow-cal.html:41:9 
[> 


10.16 ” ECMAScript 箭头 函数 计算 工具 
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ECMAScript 从 零 开 始 学 ( 视频 教学 版 ) 
10.5.2 ”和 莆 头 函数 与 解构 赋值 


通过 将 箭头 函数 与 前 文中 介绍 的 解构 赋值 相 结 合 ， 可 以 简化 对 熏 头 函数 调用 的 方式 ， 提 高 代 
码 编写 的 效率 。 
下 面 是 一 个 结合 使 用 ECMAScript 箭头 图 数 与 解构 赋值 的 代码 示例 〈 详 见 源 代 码 ch10 目录 中 
的 ch10-es-func-ext-arrow-destructuring.html 文件 ) 。 
【代码 10-17】 


01 <script type="text/javascript"> 


02 "nse strelet 

区 

04 * ECMAScript 箭头 函数 --- 计算 余数 工具 

05 od 

06 var func arrow remainder = ([i, j]) => i % j; 

07 var rd = func arrow remainder([8, 5]); 

08 console .1og ("计算 余数 工具 : func arrow remainder([8, 5]) = " + rd); 


SYSCETPDE> 


关于 【代码 10-17】 的 分 析 如 下 : 
这 段 代 码 主要 就 是 将 【代码 10-16】 中 的 余数 计算 工具 通过 数组 解构 赋值 的 方式 重 写 了 一 遍 。 
运行 页 面 ， 控 制 台 输出 的 调试 信息 如 图 10.17 所 示 。 





Developer Tools - ECMAScript in 15-days - http://localhost:63342/Websto 


a Inspector Console Debuggel Style Edito Performanc Memor, Networl Storage 半球 上 日 窗 日 可 
从 时 Filteroutput Persist Logs 


计算 余数 工具 : func arrow remainder([8, 5]) = 3 “ext-arrow-destructuring.html:29:9 


Dane en ans ems smsene enn nnn mn nn nnn nn nnn nn nm nn nnn 


10.17 ECMAScript 箭头 函数 与 解构 赋值 〈1) 


下 面 是 另 一 个 结合 使 用 ECMAScript 箭头 图 数 与 解构 赋值 的 代码 示例 〈 详 见 源 代码 ch10 目录 
中 的 ch10-es-func-ext-arrow-destructuring-rest.html 文件 ) 。 
【代码 10-18】 


01 <script type="text/javascript"> 


02 Th ey er 

03 We 

04 * ECMAScript 箭头 函数 --- 最 大 值 和 最 小 值 工具 

QS 二 

06 var Funcearrow Max = args => Math.max( .args): 

07 var Tax = func yarrow maxw(ee [lr 2 3]1}. 

08 console .1og ("最 大 值 工具 : func arrow max(...[1l, 2, 3]) = "+ max); 
09 var func arrow min = (...args) => Math.min(...args); 

二 人 varemin — tuncsarromnmin( ee lor Zr 1] 

1 console .1og ("最 小 值 工具 : func arrow min(...[3, 2, 1]) = ”+ min); 


1 ed of es 


关于 【代码 10-18】 的 分 析 如 下 : 
这 段 代码 是 通过 稍 尖 函数 与 数组 解构 赋值 实现 了 最 大 值 和 最 小 值 的 计算 工具 ， 特 殊 之 处 就 是 
使 用 到 了 前 文中 介绍 过 的 rest 参数 方式 来 传递 数组 。 
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第 10 章 函数 扩展 


运行 页 面 ， 控 制 台 输出 的 调试 信息 如 图 10.18 所 示 。 


Developer Tools - ECMAScript in 15-days - http://localhost:63342/Webstorn 





[a Inspector Console Debugger Style Editor Performance Memory Network Storage 回 7- 园 日 次 口上 口 


前 时 Filteroutput Persist Logs 
| 最 大 值 工具 : func arrow max(...[1, 2, 3]) = 3 “~arrow-destructuyuring-rest.html :29:9 
最 小 值 工具 : func arrow min(...[3, 2, 1])=1 ~arrow-destructuring-rest.html :32:9 
EE 
i >| 


10.18 ” ”ECMAScript 箭头 函数 与 解构 赋值 (2) 


10.5.3 ”和 葡 头 函数 与 回调 函数 


通过 将 稍 头 函数 与 回调 函数 相 结 合 ， 可 以 简化 对 回调 函数 的 使 用 方式 ， 提 高 代码 编写 的 效率 。 
下 面 是 一 个 通过 ECMAScript 箭头 函数 简化 回调 函数 计算 平方 和 的 代码 示例 ( 详 见 源 代 码 ch10 
目录 中 的 ch10-es-func-ext-arrow-callback-sqr.html 文件 ) 。 
【代码 10-19】 


01 <script type="text/javascript"> 


02 use sateliot 

03 We 

04 * ECMAScript 箭头 函数 --- 回调 函数 

05 A 

06 var gag= [1 3r9 maplfunetion (1)° 

OT aera 

08 EN 

09 console log(lvSauare of 3 53: og: 

10 var arrowSs = [1 3353].map(l => TY * 1) 

ul eonsole ,log (Square Of [1 3 53) DY APrPOW FUNnC + "FT arronwnS): 


To /Script> 


关于 【代码 10-19】 的 分 析 如 下 : 

这 段 代 人 码 通 过 结合 使 用 map() 函 数 方法 和 回调 函数 计算 数值 (1、3 和 5) 平方 和 ， 主 要 是 看 一 
下 通过 箭头 函数 方式 来 简写 回调 函数 的 过 程 。 

第 06 一 08 行 代码 通过 mapO 函 数 方法 和 回调 函数 实现 了 计算 平方 和 的 操作 ， 这 里 的 回调 函数 
使 用 的 是 传统 方式 。 

第 10 行 代码 同样 是 通过 mapO 函 数 方法 和 回调 函数 实现 了 计算 平方 和 的 操作 ， 而 这 里 的 回调 
国 数 使 用 的 是 箭头 图 数 方式 。 

运行 页 面 ， 控 制 台 输出 的 调试 信息 如 图 10.19 所 示 。 





Developer Tools - ECMAScript in 15-days - http://localhost:6334 


[a Inspect Conso Debugo Style Edi Performa Memo Netwo Storac 轩 " 园 目 崔 日 可 


闸 时 Filter output (| Persist Logs 
Square of [1,3,5] : 1,9,25 “arrow-callback-sqr.html:30:9 
Square of [1,3,5] by Arrow Func : 1,9,25 “arrow-Ccallback-sqr.html:32:9 


Danseesnsensensnsenssntnnnsentn nnn nn mn 


10.19 ” ECMAScript 箭头 函数 与 回调 函数 〈 计 算 平 方 和 ) 


pp 


ECMAScript 从 零 开 始 学 ( 视频 教学 版 ) 


下 面 是 一 个 通过 ECMAScript 租 头 图 数 简 化 回调 函数 进行 数组 排序 的 代码 示例 〈 详 见 源 代 码 
ch10 目录 中 的 ch10-es-func-ext-arrow-callback-sort.html 文件 ) 。 
【代码 10-20】 


01 
02 
03 
04 
05 
06 


<script type="text/javascript"> 


Use Sibel 

/* 

* ECMAScript 箭头 函数 --- 回调 函数 

ah 
variarr me lI I SD lL aorbeltunceion (tar on Tt 

return a - b; 

Eh 

Sonsoleslogq(Tsortal 3 95 1 arr)e 

var arrouArr = [13.9 5 11. .SoreE(llar bY) => a = Ds 
Sonsoles lo sorenl i 39 or Dy ATEOW FUNG 7 TT SEO > 


</acript> 


关于 【代码 10-20】 的 分 析 如 下 : 

这 段 代 码 主要 是 通过 结合 使 用 sort0 函 数 方法 和 回调 函数 对 无 序数 组 [7,3,9,5,1] 进 行 排序 ， 同 样 
也 是 看 一 下 通过 箭头 函数 方式 来 简写 回调 函数 的 过 程 。 

第 06 一 08 行 代码 通过 sort() 函 数 方法 和 回调 函数 实现 了 数组 排序 的 操作 ,这 里 的 回调 函数 使 用 
的 是 传统 方式 。 

第 10 行 代码 同样 是 通过 sort() 函 数 方 法 和 回调 函数 实现 了 数组 排序 的 操作 ,而 这 里 的 回调 函数 
使 用 的 就 是 第 头 函 数 方 式 。 

运行 页 面 ， 控 制 台 输出 的 调试 信息 如 图 10.20 所 示 。 


10.5.4 





Developer Tools - ECMAScript in 15-days - http://localhost:63342/ 


[Ca Inspect. Consol Debugg Style Edit Performan Memor Netwo Storag 轩 " 国 日 窗口 可 


前 时 Filter output Persist Logs 
Sort [1.3.9,.5,.1] : 1,3,.3.7,9 ~arrow-callback-sort,.html:30:9 
sort [7,3,9,5,1] by Arrow Func : 1,3,5,7,9 “arrow-callback-sort.html :32:9 


PTT TT TT TTT TT TT TT TT 


Deaeneeneneensnennsnsnenennsnnnnnnnnnn nn nt 


10.20 ”ECMAScript 箭头 函数 与 回调 函数 〈 数 组 排序 ) 


箭头 函数 与 链 式 函 效 


将 箭头 函数 与 链 式 函 数 相 结合 ， 可 以 通过 一 行 代码 实现 很 复杂 的 功能 ， 极 大 地 提高 了 代码 纺 


写 的 效率 。 


下 面 是 一 个 通过 结合 ECMAScript 盘 头 函数 与 链 式 图 数 实现 数组 排序 并 计算 平方 和 的 代码 示 
例 《〈 详 见 源 代码 ch10 目录 中 的 ch10-es-func-ext-arrow-callback-sort-sqr.html 文件 ) 。 
【代码 10-21 】 


01 


228 


<script type="text/jJavascript"> 


Va -Th seh ei 

Pe 

* ECMAScript 箭头 函数 --- 链 式 函数 
ed 


06 
OT 
08 
09 
10 
bal 
1 
3 
14 
ib 
16 


第 10 章 函数 扩展 


console .1o0g ("传统 方式 - 链 式 函数 ")，; 
var arr =I lr39r3r ll map(functlion (iy 
return 1 * 14; 
-SoreEttunetrone(a bel 
return a - b; 
1 
eonsole logl map er SoPt NS Se nh 
console .1og ("箭头 函数 方式 - 链 式 函 数 ")， 
Var ArPOWAPY = [I 3 9 5 1 ma => 1 1) ,Sorellar Dy => a De 
eonsole. log(lmap Tt" sore [Li SO LI DY Arrow FUNC : "TT arowaArr)s 


< aoript> 


关于 【代码 10-21】 的 分 析 如 下 : 

这 段 代 码 是 通过 链 式 函数 方式 调用 map0 和 sort() 函 数 方法 对 数组 [7,3,9,5,1] 进 行 排序 与 计算 平 
方 和 ， 主 要 是 看 一 下 通过 箭头 函数 方式 来 简写 链 式 函数 的 过 程 。 

第 07 一 11 行 代码 通过 传统 的 链 式 函数 调用 方式 ， 对 数组 进行 了 排序 (sort() 函 数 方法 ) 与 计算 
平方 和 (map0 函 数 方法 ) 的 操作 。 

第 14 行 代码 通过 第 头 函数 方式 实现 链 式 函数 的 调用 ， 对 数组 进行 了 排序 (sort() 函 数 方法 ) 与 
计算 平方 和 (map() 函 数 方法 ) 的 操作 。 

运行 页 面 ， 控 制 台 输出 的 调试 信息 如 图 10.21 所 示 。 





Developer Tools - ECMAScript in 15-days - http://localhost:63342/Webstorn 


a Inspector Console Debugger Style Editor Performance Memory Network Storage 半 ~ 园 目 崔 口 可 


兽 时 Filteroutput _] Persist Logs 
传统 方式 - 链 式 函数 “~arrow-callback-sort-sqr.html:27:9 
map + sort [7,3,9,5,1] : 1,9,25,49,81 "~arrow-callback-sort-sqr.html :33:9 
箭头 函数 方式 - 链 式 函数 “Arrow-callback-sort-sqr.html:34:9 


map + sort [7,3,9,5,1] by Arrow Func : 1,9,25,49,81 .arrow-callback-sort-sqr.html:36:9 


Danonenaneneneneninnnninnntnnnnntnnn nn 


10.21 ECMAScript 箭头 函数 与 链 式 函数 〈 数 组 排序 与 计算 平方 和 ) 


10.6 本章 小 结 


本 草 主 要 介绍 了 ECMAScript 语法 规范 中 关于 函数 扩展 方面 的 知识 , 包括 ECMAScript 函数 的 
参数 扩展 、 属 性 扩展 、 箭 头 图 数 等 内 容 。 本 章 整 体 属于 ECMAScript 6 版 本 语法 规范 中 的 新 增 内 容 ， 
且 理 解 有 一 定 的 难度 ， 相 信 通 过 文中 给 出 的 代码 实例 可 以 帮助 读者 加 深 理 解 。 
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ECMAScript 对 象 


本 和 草 将 介绍 ECMAScript 语法 规范 中 关于 对 象 (object) 的 基础 内 容 ， 有 具体 包括 对 象 的 创建 、 
初始 化 、 绑 定 及 销毁 等 .对 象 (object) 是 ECMAScript 语法 规范 中 较为 高 级 的 内 容 , 也 是 ECMAScript 
脚本 语言 中 最 核心 的 组 成 之 一 。 


11.1 “ECMAScript 对 象 


本 节 将 介绍 ECMAScript 对 象 的 基本 知识 ， 包 括 对 象 的 概念 、 对 象 的 构成 及 对 象 实例 等 ， 这 些 
内 容 是 学 习 ECMAScript 对 象 编程 的 基础 。 


11.1.1 什么 是 ECMAScript 对 象 


ECMA-262 规范 将 对 象 〈object) 定义 为 “属性 的 无 序 集合 ， 每 个 属性 存放 一 个 原始 值 、 对 象 
或 图 数 ”。 在 ECMAScript 脚本 语言 编程 中 有 一 种 说 法 ， 就 是 “一 切 皆 为 对 象 ”。 这 人 句 话 是 什么 含 
义 呢 ? 简单 来 说 ， 就 是 ECMAScript 脚本 语言 中 的 各 种 数据 类 型 《如 字符 串 、 数 字 和 数组 ) 都 是 对 
象 。 


11.1.2 “ECMAScript 对 象 构成 


在 ECMAScript 语法 规范 中 ， 对 象 (object) 由 特性 (attribute) 构成 ， 特 性 可 以 是 原始 值 、 引 
用 值 或 水 数 。 如 果 特 性 定义 为 函数 ， 那 这 个 函数 将 作为 对 象 的 方法 (method) 来 使 用 ， 否 则 该 特性 
就 作为 对 象 的 属性 (property) 来 使 用 。 
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11.1.3 ECMAScript 对 象 实例 


在 使 用 ECMAScript 对 象 创建 变量 并 进行 初始 化 后 ， 这 个 变量 就 叫 作 对 象 的 实例 (instance) ， 
而 创建 实例 的 过 程 就 叫 作 实例 化 (instantiation〉。 


11.2 ”创建 ECMAScript 对 象 


因为 ECMAScript 语法 规范 中 对 象 原 型 定义 为 Object 类 型 ， 所 以 可 以 通过 Object 类 型 创建 
ECMAScript 对 象 。 在 具体 声明 一 个 ECMAScript 对 象 时 ， 是 通过 new 关键 字 来 创建 的 。 

下 面 是 一 个 通过 new 关键 字 创 建 ECMAScript 对 象 的 代码 示例 〈 详 见 源 代码 chll 目录 中 的 
chl1-es-obj-new.html 文件 ) 。 

【代码 11-1】 

01 <script type="text/javascript"> 

02 Var obj = new Object () ; 


03 Var objStr = new String() ; 
0 </script> 


关于 【代码 11-1】 的 分 析 如 下 : 

第 02 行 代 码 通过 new 关键 字 创建 了 一 个 Object 类 型 实例 ， 并 存储 到 变量 obj 中 。 

第 03 行 代码 通过 new 关键 字 创 建 了 一 个 String 类 型 实例 ， 并 存储 到 变量 objStr 中 。 

熙 构造 图 数 无 参数 ， 则 括号 不 是 必须 使 用 的 ， 这 样 【 代 码 11-1】 可 以 采用 下 面 的 形式 进行 重 
写 〈 详 见 源 代码 chll 目录 中 的 chll-es-obj-new-omit.html 文件 ) 。 

【代码 11-2】 
01 <script type="text/javascript"> 
02 var ob] = new Object; 


03 var objStr = new String; 
Qe /script> 


【代码 11-2】 与 【代码 11-1】 虽 然 写法 略 有 区 别 ， 但 在 功能 上 是 完全 一 致 的 。 
11.3 “ECMAScript 对 象 初始 化 


ECMAScript 对 象 创 建 完成 后 ， 其 实 只 是 在 内 存 预 留 了 空间 (还 未 实际 分 配 ) ， 真 正 的 工作 要 
放 在 对 象 初始 化 中 。ECMAScript 对 象 的 初始 化 是 通过 大 括号 “{}” 来 定义 的 ， 在 大 括号 “人 ”内 
部 ， 对 象 的 属性 是 通过 “名 称 ” 和 “ 值 ” 对 的 形式 (name : value) 来 定义 的 ， 其 中 “名 称 ” 和 “ 值 ” 
用 彤 号 “:” 分 隔 。 

下 面 是 一 个 创建 并 初始 化 ECMAScript 对 象 的 代码 示例 〈 详 见 源 代码 chll 目录 中 的 
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chl1-es-obj-new-inst.html 文件 ) 。 
【代码 11-3 】 


01 <script type="text/javascript"> 


02 Var userinfo = new Object (); 
中 区) userinfo = { 

04 abo 0 

05 username : "tina", 

06 email : "tina@email.com" 
Qn ] 

08 console.log (userinfo); 


U9P esereipt> 


关于 【代码 11-3】 的 分 析 如 下 : 


第 02 行 代码 通过 new 关键 字 创 建 了 Object 类 的 一 个 实例 ， 并 将 其 存储 到 变量 userinfo， 即 


ECMAScript 对 象 中 。 


第 03 一 07 行 代 码 对 userinfo 对 象 进 行 实例 化 ,具体 定 义 了 3 个 属性 (id、username 和 email) ， 


并 进行 了 初始 化 赋值 。 
其 实 ， 第 03 一 07 行 代码 还 可 以 写成 一 行 代 码 的 形式 ， 有 具体 如 下 : 
var userinfo = { id : 123, username : "tina", email : "tina@email] .com"” }; 
这 种 写成 一 行 的 方式 在 代码 较 少 的 情况 下 是 可 行 的 ， 如 果 代 码 量 很 大 ， 这 样 与 就 不 适用 了 。 
运行 页 面 ， 控 制 台 输出 的 调试 信息 如 图 11.1 所 示 。 
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* Object { id: 123, username: "tina", email: "tina@enmail.com” } chll-es-obj-new-inst.html:29:3 
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11.1 创建 ECMAScript 对 象 并 初始 化 (1) 


下 面 和 尝试 将 【代码 11-3】 改 写 一 下 ( 详 见 源 代码 chll 目录 中 的 chl11-es-obj-new-inst-re.html 


文件 ) 。 
【代码 11-4】 


01 <script type="text/javascript"> 


02 var userinfo = new Object; 

局 USserinfo .Td = 1123 

04 userinfo.username = "tina"; 

0 userinfo.email = "tina@email .com"; 

06 console.log (userinfo); 

07 Var len = Object.keys (userinfo); 

08 console.log("userinfo's length : " + len.length); 


Oomseript> 


关于 【代码 11-4】 的 分 析 如 下 : 


第 02 行 代码 通过 new 关键 字 创 建 了 Object 类 的 一 个 实例 ， 并 将 其 存储 到 变量 userinfo， 即 


ECMAScript 对 象 中 。 注 意 ， 这 里 在 声明 对 象 时 ，Object 类 没有 加 上 括号 。 


第 03 一 05 行 代码 对 userinfo 对 象 进行 实例 化 ， 具 体 定义 了 3 个 属性 (id、username 和 email) ， 
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并 进行 了 初始 化 赋值 。 

第 06 行 代 码 通 过 console.log() 函 数 以 调试 信息 的 方式 ， 在 控制 台中 输出 了 第 03 一 05 行 代 码 定 
义 的 ECMAScript 对 象 userinfo。 

第 07 行 代码 中 通过 Object 类 型 的 keys() 方 法 获取 了 了 ECMAScript 对 象 userinfo 的 键 值 对 数量 ， 
并 保存 在 变量 len 中 。 

第 08 行 代 码 通 过 len 变量 的 length 属性 ,在 控制 台中 输出 了 ECMAScript 对 象 userinfo 的 长 度 。 

运行 页 面 ， 控 制 台 输出 的 调试 信息 如 图 11.2 所 示 。 
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» Object { id: 123, username: "tina"”, email: "tina@email.com" } chll-es-obj-new-inst-re.html:27:3 


userinfo's length : 3 chll-es-obj-new-inst-re.html:29:3 
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11.2 创建 ECMAScript 对 和 象 并 初始 化 (2) 


11.4 ” ECMAScript 对 象 销毁 


ECMAScript 脚本 语言 在 设计 上 借鉴 了 很 多 先进 的 设计 理念 ， 比 较 著 名 的 就 是 “无 用 存储 单元 
收集 程序 (garbage collection routine) ”， 该 理念 主要 借鉴 了 Java 语言 的 “垃圾 回收 机 制 ”。 设 计 
无 用 存储 单元 收集 程序 ， 就 意味 看 程序 员 开 发 时 不 必 专 门 考虑 通过 销毁 对 象 来 释放 内 存 了 。 

无 用 存储 单元 收集 程序 的 原理 是 ， 当 代码 中 已经 没有 对 某 个 对 象 的 引用 时 ， 该 对 象 将 会 被 销 
毁 。 例 如 ， 每 当 一 个 函数 执行 完 代 码 后 ， 无 用 存储 单元 收集 程序 都 会 运行 ， 然 后 将 无 效 的 对 象 进行 
销毁 ， 从 而 释放 无 用 的 内 存 空间 。 当 然 ， 在 茶 些 特殊 的 、 不 可 预知 的 情况 下 ， 无 用 存储 单元 收集 程 
序 也 会 运行 。 

ECMAScript 语法 规范 中 也 支持 强制 销毁 对 象 ， 通 过 把 对 象 的 所 有 引用 都 定义 为 null 原始 值 ， 
就 可 以 强制 性 地 销毁 对 象 。 

下 面 是 一 个 将 ECMAScript 对 象 进行 销毁 的 代码 示例 《〈 详 见 源 代码 chll 目录 中 的 
ch11-es-obj-nullLhtml 文件 ) 。 

【代码 11-5】 


01 <script type="text/javascript"> 


人 这 var userinfo = { 

03 a Be be 

04 username : "tina", 

05 email : "tina@email .comn 
06 }; 

07 console.log (userinfo); 

08 userinfo = null; 

09 console.log (userinfo); 


TO 
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关于 【 代 11-5】 的 分 析 如 下 : 

第 02 一 06 行 代 码 定义 了 一 个 对 象 userinfo， 并 进行 了 实例 化 操作 。 

第 07 行 代码 先 将 对 象 userinfo 的 内 容 输出 到 浏览 器 控制 台中 进行 显示 。 

第 08 行 代码 强制 性 将 对 象 userinfo 重新 定义 为 null。 

第 09 行 代 码 再 次 将 强制 销毁 后 的 对 象 userinfo 的 内 容 输 出 到 浏览 器 控制 台中 ， 这 样 可 以 与 第 
07 行 代码 输出 的 内 容 进行 对 比 。 

运行 页 面 ， 控 制 台 输出 的 调试 信息 如 图 11.3 所 示 。 如 图 11.3 中 箭头 所 指 ， 在 第 08 行 代码 强 
制 销 毁 对 象 userinfo 后 , 第 09 行 代码 再 次 输出 该 对 象 的 内 容 为 null, 说 明 此 时 对 对 象 userinfo 的 引 
用 已 经 不 存在 了 。 那 么 当 无 用 存储 单元 收集 程序 再 次 运行 时 ， 该 对 象 将 被 销毁 。 
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从 时 Filter output Persist Logs 
» Object { id: 123，Username: “tina”, email: "tina@email.com"” } chll-es-obj-null.html:28:3 


chll-es-obj-null.html :30:3 
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11.3 ” ECMAScript 对 和 象 被 强制 销毁 (1) 


这 里 还 需要 介绍 一 个 概念 ， 就 是 ECMAScript 对 象 的 引用 。 在 ECMAScript 语法 规范 中 规定 ， 
代码 不 能 访问 对 象 的 物理 地 址 ， 能 访问 的 仅仅 是 对 象 的 引用 。 我 们 在 使 用 ECMAScript 语言 创建 对 
象 时 ， 都 会 定义 一 个 变量 用 于 存储 该 对 象 ， 这 个 变量 就 是 对 该 对 象 的 引用 (但 不 是 对 象 本 映 ) 。 

下 面 继续 将 【代码 11-5】 重 新 改写 一 下 ， 实 现 一 个 将 ECMAScript 对 象 引 用 和 ECMAScript 对 
象 销毁 相 结 合 的 代码 示例 〈 详 见 源 代码 chll 目录 中 的 ch11-es-obj-null-re.html 文件 ) 。 

【代码 11-6】 


01 <script type="text/javascript"> 


02 Var userinfo = { 

03 Tel 2 

04 username : "tina", 

05 email : "tina@email .com" 

06 }; 

QO eonsolee Iog (Susreinto nse :ns 

08 console.log (userinfo); 

09 var userinfo a = userinfo; // TODO: 定义 对 象 引用 
10 console.log ("userinfo a = usreinfo :")， 

To console.log (userinfo a); 

12 userinfo = null; 

13 console.log ("usreinfo = null :");} 

14 Console .log (userinfo); 

15 console .log("after usreinfo = null, userinfo a :");} 
16 console.1log (userinfo a); 


I <ASCELDt> 


关于 【代码 11-6】 的 分 析 如 下 : 

第 02 一 08 行 代码 大 体 上 沿用 了 【代码 6-5】 中 的 代码 。 

第 09 行 代码 定义 了 第 二 个 对 象 userinfo a， 并 通过 赋值 为 userinfo 再 次 引用 了 该 对 象 。 
第 11 行 代 码 将 对 象 userinfo a 的 内 容 输出 到 浏览 器 控制 台中 进行 显示 。 
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第 12 行 代 码 强制 性 将 对 象 userinfo 重新 定义 为 null。 

第 14 行 和 第 16 行 代码 再 次 将 对 象 userinfo 和 userinfo a 的 内 容 输出 到 浏览 器 控制 台中 进行 显 
示 ， 目 的 是 测试 一 下 将 对 象 userinfo 强制 性 定义 为 null 后 ， 对 象 userinfo a 有 没有 受到 影响 。 

运行 页 面 ， 控 制 台 输出 的 调试 信息 如 图 11.4 所 示 。 
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11.4 ECMAScript 对 象 强制 性 销毁 (2) 


如 图 11.4 所 示 ， 从 第 11 行 代码 输出 的 结果 来 看 ， 第 09 行 代码 定义 的 第 二 个 对 象 userinfo a 
完全 复制 了 第 02 一 06 行 代 码 定 义 的 第 一 个 对 象 userinfo。 

在 第 12 行 代码 强制 性 销毁 对 象 userinfo 后 ， 从 第 16 行 代 码 输出 的 结果 来 看 ， 第 二 个 对 象 
userinfo a 没有 受到 任何 影响 。 

【代码 11-6 的 测试 结果 充分 验证 了 前 文中 对 ECMAScript 对 象 引 用 的 描述 , 即 在 定义 了 对 象 
的 多 个 引用 后 ， 销 毁 其 中 一 个 并 不 会 对 其 他 对 象 引用 产生 影响 。 


11.5 “ECMAScript 对 象 绑 定 方式 


这 里 再 介绍 一 下 ECMAScript 对 象 绑 定 的 内 容 。 根 据 ECMA-262 官方 文档 的 描述 ， 绑 定 
(binding) 就 是 将 对 象 的 接口 与 对 象 实例 结合 在 一 起 的 过 程 。 绑 定 (binding ) 一 般 分 为 早 绑 定 (early 
binding) 和 晚 绑 定 (late binding) 两 种 方式 。 

早 绑 定 〈early binding) 就 是 指 在 实例 化 对 象 之 前 定义 它 的 属性 和 方法 ， 这 样 编译 器 或 解释 程 
序 就 能 提前 将 其 转换 机 器 代码 。 因 为 ECMAScript 脚本 语言 不 是 强 类 型 语言 ， 所 以 不 支持 早 绑 定 ， 
而 诸如 C 语 言 、C# 语 言 和 Java 语言 这 类 的 ， 就 支持 早 绑 定 。 

晚 绑 定 (late binding) 就 是 指 编译 器 或 解释 程序 在 运行 前 不 知道 对 象 的 类 型 。 因 此 使 用 晚 绑 定 
的 语言 无 须 检查 对 象 的 类 型 ， 只 检查 对 象 是 否 文 持 属性 和 方法 即 可 。ECMAScript 脚本 语言 中 的 所 
有 变量 都 采用 晚 绑 定 方式 ， 这 样 有 利于 执行 大 量 的 对 象 操作 ， 并 且 没 有 任何 的 限制 。 


11.6 “本 盖 小 结 


本 草 主 要 介绍 了 ECMAScript 语法 规范 中 关于 对 象 的 基础 知识 ,包括 对 象 的 创建 、 初 始 化 、 销 
毁 及 绑 定 等 方面 的 内 容 ， 并 通过 一 些 具 体 实例 进行 了 讲解 。 
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在 ECMAScript 语法 规范 中 , 对 象 分 为 本 地 对 象 、 内 阐 对 象 和 箱 主 对 象 三 大 类 。 本 章 将 介绍 本 
地 对 象 和 内 置 对 象 ， 本 地 对 象 属于 ECMA-262 规范 定义 的 引用 类 型 ， 而 且 内 置 对 象 严格 来 说 也 属 
于 本 地 对 象 。 


12.1 ECMAScript 对 象 概述 


对 于 ECMAScript 脚本 语言 来 说 ， 一 切 事物 皆 为 对 象 。 那 么 如 何 理解 这 句 话 呢 ? 简单 来 说 ， 
Object 类 型 是 对 象 ， 数 值 类 型 (Number) 、 了 字符 串 类 型 (String) 、 数 组 类 型 (Array) 也 是 对 象 ， 
而 日 期 类 型 (Date) 、 正 则 表达 式 (RegExp) 、 甚 至 函数 类 型 (Function ) 同样 是 对 象 ， 所 以 是 “一 

本 地 对 象 主 要 包括 数值 类 型 (Number) 、 了 字符 串 类 型 (String) 、 数 组 类 型 (Array) 、 日 期 
类 型 (Date) 、 正 则 表达 式 (RegExp) 等 。ECMA-262 规范 中 对 于 本 地 对 象 有 一 个 定义 : “独立 
于 条 主 环境 的 、 由 ECMAScript 语言 实现 所 提供 的 对 象 ”。 因 此 ， 将 本 地 对 象 理解 为 ECMA-262 
规范 中 所 描述 的 类 〈 引 用 类 型 ) 的 概念 更 为 恰当 。 

ECMAScript 语言 还 定义 了 两 个 内 置 对 象 ， 即 Global 和 Math。ECMA-262 规范 中 对 于 内 置 对 
象 也 有 一 个 定义 : “由 ECMAScript 语言 实现 所 提供 的 、 独 立 于 答 主 环境 的 所 有 对 和 象 , 在 ECMAScript 
程序 开始 执行 时 出 现 ”。 内 置 对 象 意味 着 设计 人 员 不 必 明 确实 例 化 对 象 ， 其 已 被 实例 化 了 。 

另外 ，ECMA-262 规范 中 定义 了 所 有 非 本 地 对 象 都 是 宿主 对 象 ， 簿 主 对 象 即 是 由 ECMAScript 
的 宿主 环境 所 提供 的 对 象 ， 具 体 是 指 BOM 和 DOM 对 象 。 
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12.2 ”Object 对 象 


在 ECMAScript 语法 规范 中 ，Object 对 象 是 其 他 一 切 对 象 的 基础 。 虽 然 在 实际 项 目 开 发 中 对 
Object 对 象 的 使 用 并 不 多 ， 但 由 于 其 他 对 象 都 是 Object 对 象 继承 而 来 的 ， 理 解 一 下 Object 对 象 的 
内 涵 还 是 有 很 大 帮助 的 。 

下 面 是 一 个 使 用 Object 对 象 的 代码 示例 ( 详 见 源 代 码 ch12 目录 中 的 ch12-es-obj-object.html 文件 )。 

【代码 12-1 】 


QL 
四 之 
3 
04 
05 
06 
07 
08 
09 
有 
| 
12 
| 


<script type="text/javascript"> 
= new Object () ; 


Var obj 
| 


is 


由 


Username : 


email : 


}? 


console. 
console. 
console. 


console 


</acript> 


log (obj 
log (ob] 
log (ob] 


IolobDy. 
console. 


log (obj 


eo 


"tina@email.com" 


.hasOwnProperty ("id")); 
.hasOwnProperty ("username") ) ; 
.hasOwnProperty ("email"));} 


Lostring(yy: 


.ValueOf () ); 


关于 【代码 12-1】 的 分 析 如 下 : 

第 02 一 07 行 代码 创建 了 一 个 对 象 obj， 并 进行 了 初始 化 操作 。 

第 08 一 10 行 代码 通过 使 用 hasOwnProperty() 方 法 ， 检 测 了 对 象 obj 中 所 定义 的 3 个 属性 (id、 
username 和 email) 是 否 存 在 ， 返 回 值 为 一 个 布尔 值 。Object 对 象 的 hasOwnProperty(0) 方 法 用 于 判 
断 对 象 是 否 具 有 某 个 特定 的 属性 ， 且 指定 属性 的 参数 必须 为 字符 串 ， 如 id。 

第 11 行 代码 通过 使 用 toString() 方 法 返回 对 象 的 原始 字符 串 。 在 ECMAScript 语法 规范 中 ， 
Object 对 象 没有 定义 这 个 值 ,因此 调用 该 方法 后 的 结果 取决 于 对 ECMAScript 语法 规范 的 具体 实现 。 

第 12 行 代码 通过 使 用 valueOf0 方 法 返回 对 象 的 原始 值 。 在 ECMAScript 语法 规范 中 ， 对 于 很 
多 对 象 调用 该 方法 后 的 结果 与 调用 toString() 方 法 后 的 结果 是 一 致 的 。 


一 /一 


运行 


页 面 ， 控 制 台 输 出 的 调试 信息 如 图 12.1 所 示 。 


Developer Tools - ECMAScript in 15-days - pA dt 





[Ca Inspector Console Debugger Style Editor Performance Memory Network Storage 加 7- 园 日 浆 日 加 
从 时 Filteroutput 


| true 
true 
tryue 


[object Object] 


by Object { id: 1323, username: "tina", email: "tina@Gemail.com" } chl2-es-obj-object. 


_| Persist Logs 


chl2-es-obj-object. 
chl2-es-obj-object. 
chl2-es-obj-object. 
chl2-es-obj-object. 


html: 
htmt : 
html: 


TT 


图 12.1 Object 对 象 
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如 图 12.1 所 示 ， 从 第 08 一 10 行 代码 的 输出 结果 来 看 ， 调 用 hasOwnProperty() 方 法 可 以 成 功 检 
测 到 对 象 obj 中 所 定义 的 3 个 属性 。 

从 第 11 和 第 12 行 代码 的 输出 结果 来 看 ， 调 用 toString() 方 法 得 到 的 返回 值 是 object 类 型 ， 而 
调用 valueOf() 方 法 得 到 的 返回 值 是 对 人 象 obj 所 定义 的 具体 内 容 。 


12.3 ”String 对象 


在 ECMAScript 语法 规范 中 ，String 是 用 于 处 理 字 符 串 的 对 象 类 型 。String 对 象 提 供 了 大 量 的 
用 于 处 理 字 符 串 的 方法 ， 下 面 详细 介绍 其 基本 使 用 方法 。 

下 面 是 一 个 使 用 String 对 象 属 性 和 方法 的 代码 示例 〈 详 见 源 代码 ch12 目录 中 的 ch12-es-obj- 
string.html 文件 ) 。 

【代码 12-2】 


01 <script type="text/javascript"> 


02 var str = new String ("Hello ECMAScript!"); // TODO: equals String () 

03 console lo Ste | See 

04 Var str 2 = String("Hello ECMAScript!"); 

四 二 if (str == str 2) { 

06 SonsoLes LogM E20 1 Ee 

07 } 

08 console.log("str length : " + str.length); // TODO: length 

09 consoles log( concat( 1 str.concat(str 2)); TODOSEConeces 
10 Console .log("replace (/ECMRA/ ，'Uava') : "+str.replace(/ECMA/, "Java")); 
Tal Sonsoles log(lmslicelo i000 "atr Slicelor TU) // TODO: replace() 
1 econsole logq(Sstr SPJIIENCO JJ A ToD splLel) 

3 eongolee Log(SCte Spl /TODG: Splie() 


L405cripk> 


关于 【代码 12-2】 的 分 析 如 下 : 

第 02 行 代码 通过 new 运算 符 定义 了 第 一 个 String 对 象 str， 并 进行 了 实例 化 操作 。 

第 04 行 代码 直接 通过 String0 构 造 方法 定义 了 第 二 个 String 对 象 str 2， 与 第 一 个 String 对 象 
str 进行 了 同样 的 实例 化 操作 。 

第 05 一 07 行 代码 通过 使 用 让 条 件 选择 语句 ， 判 断 这 两 个 String 对 象 sr 和 str 2 是 否 相 等 ， 若 
相等 ， 则 通过 第 06 行 代码 输出 String 对 象 str_ 2 的 内 容 。 

第 08 行 代 码 通过 使 用 length 属性 获取 了 String 对 象 str 的 长 度 。 

第 09 行 代码 通过 使 用 concat() 方 法 将 两 个 String 对 象 sr 和 str_2 的 字符 串 内 容 进 行 连接 操作 。 

第 10 行 代码 通过 使 用 replace() 方 法 将 String 对 象 str 中 指定 的 内 容 进 行 字符 串 奉 换 操作 。 

第 11 行 代码 通过 使 用 slice0 方 法 提取 String 对 象 str 中 指定 下 标 位 置 之 间 的 字符 串 内 容 。 

第 12 和 第 13 行 代码 通过 使 用 split(0) 方 法 将 String 对 象 str 中 的 内 容 按照 参数 要 求 进行 分 割 操 
作 。 

运行 页 面 ， 控 制 台 输出 的 调试 信息 如 图 12.2 所 示 。 
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Developer Tools - ECMAScript in 15-days - http://localhost:63342/WebstormPro 





Ca Inspector Console Debugger Style Editor Performance Memory Network Storage 上 加- 回 日 家 日 口 


闪 时 Filter output Persist Logs 
| str : Hello ECMAScript! chl2-es-obj-string.html :24:3 
str 2 ; Heilo ECMAScript! chl2-es-obj-string.html:27:4 


str length : 17 chl2-es-obj-string.html :29:3 


concat() : Helilo ECMAScript!Hello ECMAScript! chl2-es-obj-string.html :30:3 
replace(/ECMA/, "Java') : Hello JavaScript! chl2-es-obj-string.html:;31:3 
slice(6, 10) : ECMA chl2-es-obj-string.html :32:3 
» Array { “Hello”", "ECMAScript!” ] chl2-es-obj-string.html :33:3 

”I DE "EE "WN Ns 1 hlsGh ti mtnL Dy 


rapa EN 0 "IP, 





12.2 ”String 对象 


如 图 12.2 所 示 ， 从 第 06 行 代码 的 输出 结果 来 看 ， 第 05 一 07 行 代码 的 让 条 件 选 择 语 句 判 断 结 
果 为 真 ， 说 明 两 个 String 对 象 str 和 str 2 是 相等 的 。 

从 第 08 行 代码 的 输出 结果 来 看 ，String 对 象 str 的 字符 串 长 度 为 17。 

从 第 09 行 代码 的 输出 结果 来 看 concat() 方 法 成 功 将 两 个 String 对 象 sr 和 str 2 的 字符 串 内 容 
连接 到 了 一 起 。 

从 第 10 行 代 码 的 输出 结果 来 看 ，replace() 方 法 成 功 将 String 对 象 str 中 的 “ECMA ”内 容 蔡 换 
为 “Java”。 

从 第 11 行 代码 的 输出 结果 来 看 ，slice() 方 法 成 功 提取 了 String 对 象 str 中 指定 部 分 的 内 容 。 

从 第 12 行 代 码 的 输出 结果 来 看 ，split(" ") 方 法 〈 人 参数 为 带 一 个 空格 的 字符 串 ) 成 功 将 String 
对 象 str 按照 单词 分 割 成 数组 格式 。 

从 第 13 行 代码 的 输出 结果 来 看 ，split("") 方 法 (参数 为 带 一 个 空 字符 串 ) 成 功 将 String 对 象 str 
按照 字母 ( 含 空格 ) 分 割 成 了 数组 格式 。 

以 上 就 是 String 对 象 中 一 些 常 用 方法 的 使 用 过 程 ，ECMA-262 规范 中 还 定义 了 一 些 关 于 String 
对 象 的 方法 ， 读 者 可 自行 参看 学 习 。 


12.4 ”Array 对象 


在 ECMAScript 语法 规范 中 ，Array 是 用 于 处 理 数组 的 对 象 类 型 。Array 对 象 提供 了 大 量 的 用 
于 处 理 数 组 元 素 的 方法 ， 在 前 文中 关于 数组 函数 的 内 容 已 经 介绍 了 一 部 分 ， 本 节 再 补充 一 部 分 。 


12.4.1 Array 对 象 初 始 化 


Array 对 象 的 初始 化 可 以 通过 多 种 方式 来 完成 ， 既 可 以 先 创 建 后 初始 化 ， 也 可 以 创建 时 就 进行 
初始 化 。 
下 面 是 一 个 创建 Array 对 象 和 初始 化 方式 的 代码 示例 《〈 详 见 源 代 码 chl2 目录 中 的 
ch12-es-obj-array-inst.html 文件 ) 。 
【代码 12-3 】 


01 <script type="text/javascript"> 
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02 /* inst array pattern 1 */ 

局 ConsoleclooglnTInostiaPayPatternnle wh 

04 Var arrl = new Array() : 

05 arrl[0] = 1; 

06 arrl[1] = 2; 

07 arr1li[l2] = 3。 

08 Console .log (arrl); 

UY eonsole .log(Marri gs length Ts 7 7 arrl lengthys 
10 console.1og(); 

il "Inst arrav pattern 2 二 六 

12 console.log("Inst Array Pattern 2 : "); 

bs) Var arr2 = new Array (3); 

14 console slog ("arr2 .9 ongth 719 :71 arr2.Tength): 
下 本 for (var i=0; i<arr2.length; i++) { 

16 局 和 于 人 [1 

] lf } 

18 Console .log (arr2); 

19 Console .log () ; 

20 /* inst array Pattern 3 */ 

21 console.log("Inst Array Pattern 3 : "); 

六 Var arr3 = new Array(l, 2, 3); 

A Console .1og (arr3); 

24 eonsoles log ("arr3's length 19 5 | are3 Length)s 
25 console .1log() ; 


2 oe eh eal oh ee 


关于 【代码 12-3】 的 分 析 如 下 : 

这 段 代 码 使 用 了 3 种 方式 定义 并 实例 化 了 Array 对 象 ， 分 别 是 第 04 一 10 行 代码 、 第 12 一 19 
行 代码 和 第 21 一 25 行 代码 。 

第 04 行 代码 通过 new 运算 符 定义 第 一 个 Array 对 象 arr1。 注 意 ， 该 对 象 arrl 没有 定义 参数 ， 
相当 于 定义 了 一 个 无 固定 长 度 的 数组 对 象 ， 便 于 后 续 进 行动 态 实 例 化 操作 。 

第 05 一 07 行 代 码 对 Array 对 象 arrl 进行 了 实例 化 操作 。 注 意 ， 数 组 起 始 下 标 是 从 0 开始 的 ， 
依次 对 3 个 数组 元 素 进 行 赋值 。 

第 08 行 代 码 直 接 通过 变量 名 arrl 在 浏览 器 控制 台中 输出 数组 的 内 容 。 

第 09 行 代 码 通 过 使 用 length 属性 在 浏览 器 控制 台中 输出 变量 名 arrl 的 数组 长 度 。 

第 13 行 代码 通过 new 运算 符 定义 第 二 个 Array 对 象 arr2。 注 意 ， 该 对 象 arr2 定义 了 参数 3， 
相当 于 定义 了 一 个 固定 长 度 为 3 的 数组 对 象 。 

第 14 行 代码 通过 使 用 length 属性 在 浏览 器 控制 台中 输出 变量 arr2 的 数组 长 度 。 

第 15 一 17 行 代码 通过 使 用 for 循环 语句 对 Array 对 象 arr2 进行 实例 化 操作 ， 赋 值 内 容 与 第 一 
个 Array 对 象 arrl 相同 。 

第 18 行 代 码 直接 通过 变量 名 arr2 在 浏览 器 控制 台中 输出 数组 的 内 容 。 

第 22 行 代 码 通过 new 运算 符 定义 第 三 个 Array 对 象 arr3 。 注 意 ， 在 定义 对 象 arr3 的 同时 直接 
在 Array() 方 法 内 实例 化 该 对 象 ， 赋 值 内 容 与 前 两 个 Array 对 象 arrl 和 arr2 相同 。 

第 23 行 代 码 直 接 通过 变量 名 arr3 在 浏览 器 控制 台中 输出 数组 的 内 容 。 

第 24 行 代码 通过 使 用 length 属性 在 浏览 器 控制 台中 输出 变量 arr3 的 数组 长 度 。 

运行 页 面 ， 控 制 台 输出 的 调试 信息 如 图 12.3 所 示 。 从 【代码 12-3】 中 的 3 种 Array 对 象 定义 
与 实例 化 方式 的 输出 结果 来 看 ， 这 3 种 方式 的 效果 是 相同 的 ， 且 每 种 方式 都 有 各 自 的 优点 。 具 体 来 
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说 ， 第 一 种 方式 可 以 创建 一 个 无 固定 长 度 的 数组 对 象 ; 第 二 种 方式 可 以 在 实例 化 前 


的 长 度 ; 第 三 种 方式 最 简洁 、 快 速 ， 在 实际 开发 中 可 根据 代码 需求 择优 选择 。 





Developer Tools - ECMAScript in 15-days - http://localhost:633427/We 


中 ”Inspectc Consol! Debugge Style Editc Performan' Memor Networ Storag 轩 " 轩 上 目 崔 日 可 
闸 是 Filter output 


Inst Array Pattern 1 : 
PAPFray da ds] 
arrl's Length is : 3 


Inst Array Pattern 2 : 


arr2's Length is : 3 
ri | Ari BB-) 


Inst Array Pattern 3 : 
prvay -Li 2 | 
arr3's length is : 3 


-Obj- 
-obj - 
-obj - 
-obj - 
-obj- 
-obj- 
-0bj - 


_] Persist Logs 


-inst. 
-inst 
-inst 
-inst 
-inst 
-inst 
-inst. 
-inst. 
-inst, 
-inst., 
-inst. 
-inst,. 


html: 
.htmt : 
,htmt : 
,htmt : 
,htmt : 
.htmt : 
htmt : 


WW WW WU WU WU W W WU WU WU 


12.3 Array 对 象 定义 与 初始 化 


12.4.2 Array 对 象 连接 操作 


Array 对 象 定 义 了 一 个 concat() 函 数 方法 用 于 数组 的 连接 操作 。 下 面 是 一 个 使 用 Array 对 象 中 
concat() 方 法 连接 数组 的 代码 示例 ( 详 见 源 代码 ch12 目录 中 的 ch12-es-obj-array-concat.html 文件 ) 。 
【代码 12-4】 


01 
02 
03 
04 
05 
06 
07 
08 
Es, 
10 
hal 
JT 
3 
14 
下 
16 
ha 
18 
19 
20 


/x nst 


console. 
var arrl 
console. 


<script type="text/javascript"> 


array 1 */ 

Togle Tnot AAPA en 
= new Array(l, 2, 3); 
Today > 


console .log () : 

consoles slog (rareli eoneat 13 27 1h 
eonsole log(larri eoncat (Se 27 1))> 
console.1og(); 

eonsole: log (“Inst Array 2 Ye 

Var arr2 = new Array(4, 5, 6); 
console.1log (arr2) ; 

eonsoles Lool( Tinst aa < 

Var arr3 = new Array(7, 8, 9); 
console.log (arr3); 

console .log() ; 

console.log("Array 1 concat Array 2 & 3 
console .logqlarri concat (arr2 RS 


console. 
</script> 


log(); 


关于 【代码 12-4】 的 分 析 如 下 : 
第 04 行 代 码 通过 new 运算 符 定 义 了 第 一 个 Array 对 象 arr1， 并 实例 化 一 个 固定 长 度 的 数组 对 
tl, 39)» 
第 05 行 代码 直接 通过 变量 名 arrl 在 浏览 器 控制 台中 输出 数组 的 内 容 。 


es 
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第 08 行 代码 直接 通过 concat() 方 法 连接 数组 (3，2，1) ， 并 在 浏览 器 控制 台中 输出 连接 操作 
后 的 结果 。 

第 11 行 代码 通过 new 运算 符 定义 了 第 二 个 Array 对 象 arr2， 并 实例 化 一 个 固定 长 度 的 数组 对 
名 (4, 6。 

第 12 行 代 码 直 接 通过 变量 名 arr2 在 浏览 器 控制 台中 输出 数组 的 内 容 。 

第 14 行 代码 通过 new 运算 符 定 义 了 第 三 个 Array 对 象 arr3， 并 实例 化 一 个 固定 长 度 的 数组 对 
一 

第 15 行 代码 直接 通过 变量 名 arr3 在 浏览 器 控制 台中 输出 数组 的 内 容 。 

第 18 行 代码 直接 通过 concat() 方 法 同时 连接 数组 arr2 和 数组 arr3， 并 在 浏览 器 控制 台中 输出 
连接 操作 后 的 结果 。 

运行 页 面 ， 控 制 台 输出 的 调试 信息 如 图 12.4 所 示 。 





Developer Tools - ECMAScript in 15-days - http://localhost:63342/Websto 


CR Inspector Console Debugge' Style Edito Performanct Memory Network Storage 轩 " 园 目 窗 口 了 可 


会 时 Filter output Persist Logs 
Inst Array 1 : chl2-es-obj-array-concat.html :24:3 
by Array [ 1, 2, 3 ] chl2-es-obj-array-concat .htmt:26:3 

| chl2-es-obj-array-concat.html :27:3 
arrl concat {3, 2, 1} chl2-es-obj-array-concat.html :28:3 
brArray [ ,26 B73. 2 3) chl2-es-obj-array-concat.html:29:3 

chl2-es-obj-array-concat,.html :30:3 
Inst Array 2 : chi2-es-obj-array-concat.html :31:3 
* Array 1 4, $5,6] ch1l2-es-obj-array-concat .html:33:3 了 3 
Inst Array 3 : chl2-es-obj -array-concat.html:34:3 
* Array [ 7, 8, 9 ] chl2-es-0obj-array-Cconcat .htmlL:36:3 


chl2-es-obj-array-concat.html:37:3 
Array 1 concat Array 2 & 3.: chl2-es-obj-array-concat,html:38:;3 
> arTay 〖 B37 25nds do 3, Be Hs i] chl2-es-obj-array-concat.html :39:3 
chl2-es-obj-array-concat.html :40:3 


12.4 ”Array 对 象 数 组 连接 方法 
如 图 12.4 所 示 ， 从 第 08 行 代 码 输出 的 结果 来 看 ， 数 组 arrl 直接 连接 数组 {3，2，1} 的 操作 结 
果 为 {1，2，3，3，2，1}， 说 明 直 接连 接 数 组 的 操作 成 功 了 。 
从 第 18 行 代码 输出 的 结果 来 看 ， 数 组 arrl 同时 连接 数组 arr2 和 arr3 的 操作 结果 为 1，2，3， 
4，5，6，7，8，9}， 说 明 同时 连接 两 个 数组 的 操作 也 没有 问题 。 
通过 【代码 12-4】 可 以 看 到 ，concat() 方 法 既 可 以 直接 连接 数组 项 ， 也 可 以 同时 连接 多 个 数组 
对 象 。 


12.4.3 ”Array 对 象 模拟 堆栈 


Array 对 象 中 定义 了 一 组 用 于 模拟 堆栈 操作 的 方法 ， 分 别 是 push() 和 pop(0)。 在 ECMA-262 规 
范 中 关于 这 两 个 方法 的 说 明 如 下 : 

e@ push() 方 法 : 用 于 向 数组 的 末尾 添加 一 个 或 多 个 元 素 ， 并 返回 数组 新 的 长 度 。 

e@ pop() 方 法 : 用 于 删除 并 返回 数组 的 最 后 一 个 元 素 。 

下 面 是 一 个 使 用 Array 对 象 中 push0 和 popO 模 拟 堆 栈 操 作 方 法 的 代码 示例 《〈 详 见 源 代 码 ch12 
目录 中 的 ch12-es-obj-array-push-pop.html 文件 ) 。 
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【代码 12-5 】 


01 <script type="text/javascript"> 


02 /* inst array */ 

Ei eonsole. Log ("Inst Array EC 
04 Var arr m Tew Array(l, 27 3): 
QS Console .1og (arr) ; 

06 console.1og(); 

07 congolee log( am us 二 
08 console > log (arr.push(tl 57 oh) 
09 eonsole loglacr)s 

10 console.1og(); 

1 econsole Log are Dop(h 

12 console .log (arr.pop ()); 

13 Console .1og (arr); 

14 console .log(arr.pop ()); 

1s5 console.log (arr) : 

16 console .log (arr.pop ()); 

1 console.log (arr); 

18 console.1o0g (); 


TO /CDI 


关于 【代码 12-5】 的 分 析 如 下 : 
第 04 行 代码 通过 new 运算 从 定义 了 第 一 个 Array 对 象 arr, 并 实例 化 一 个 固定 长 度 的 数组 对 象 
人 

第 05 行 代码 直接 通过 变量 名 arr 在 浏览 器 控制 台中 输出 数组 的 内 容 。 

第 08 行 代 码 直 接 通过 push() 方 法 将 数组 (4，5，6) 加 入 数组 对 象 arr 的 末尾 ， 并 通过 第 09 
行 代 码 在 浏览 器 控制 台中 输出 push 操作 后 的 结果 。 

第 12、 第 14 和 第 16 行 代 码 分 别 通过 调用 3 次 pop0 方 法 取出 数组 对 象 arr 的 末尾 元 素 ， 并 通 
过 第 13、 第 15 和 第 17 行 代码 在 浏览 器 控制 台中 输出 pop 操作 后 的 结果 。 

运行 页 面 ， 控 制 台 输出 的 调试 信息 如 图 12.5 所 示 。 从 第 08 行 代码 输出 的 结果 来 看 ，push() 方 
法 返回 的 是 数组 修改 完成 后 的 长 度 。 从 第 13、 第 15 和 第 17 行 代码 输出 的 结果 来 看 ，pop0 方 法 返 
回 的 是 数组 末尾 的 元 素 。 
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会 时 Filter output | Persist Logs 
Inst Array : ~“e5-0bj-array-push-pop.html :24:;3 
p> Array 二】 “5-0bj-array-push-pop.html:26:3 

~e5-0bj-array-push-pop.html :27:3 
arr.push(4, 5, 6) ~e5-0bj-array-push-pop.html:28:3 
6 ~e5-0bj-array-push-pop.html :29:3 
> AFyaey | 2. -~es-0bj-array-push-pop.html :30:3 

| ~es-0bj-array-push-pop.html:31:3 
arr.popf) -es5-0bj-array-pyush-pop.html :32:3 
6 -es-0bj-array-push-pop.html :33:3 
b> Arrey 〖 2 3.] -~es-0bj-array-push-pop.htm1:34:3 
5 -es-0bj-array-push-pop.html :35:3 
* Array { 1, 2, 3] -es-0bj-array-push-pop.html :36:3 
也 -5-0bDj-array-push-pop.html :37:3 
> Array [ 1.2, 3] “es-0bj-array-push-pop.html:38:3 


“es5-0bj-array-push-pop.html:39:3 


12.5 ”Array 对 象 数 组 pop 和 push 方法 
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12.5 ”Number 对 象 


在 ECMAScript 语法 规范 中 , Number 是 对 原始 数值 的 包装 对 象 。- Number 对 象 提 供 了 一 些 专用 
于 处 理 原 始 数值 的 方法 , 在 前 面 的 章节 中 已 经 陆续 介绍 了 一 部 分 比较 稍 规 的 方法 ,本 节 再 补充 几 个 
ECMA-262 规范 中 比较 有 特点 的 方法 。 
@ toFixed() 方 法 : 用 于 将 数字 转换 为 字符 串 ， 结 果 可 以 保留 小 数 点 后 指定 位 数 的 数字 。 该 方法 
主要 用 于 把 Number 数字 按照 指定 的 小 数位 数 进行 四 使 五 入 操作 . 
@ toExponential() 方 法 : 用 于 把 Number 数字 转换 为 指数 计数 法 。 
@ toPrecision() 方 法 : 在 Number 对 象 的 值 超出 指定 位 数 时 ， 将 其 转换 为 指数 计数 法 。 


下 面 是 一 个 使 用 以 上 几 个 Number 对 象 方法 的 代码 示例 《〈 详 见 源 代码 chl2 目录 中 的 
ch12-es-obj-number.html 文件 ) 。 
【代码 12-6】 


01 <script type="text/javascript"> 


02 var d = new Number(2 / 3); 

03 console.1lo0g ("2/3 = "+ d); 

04 console.log("(2/3). toFixed(3) = " + d.toFixed(3)); 

05 console.1og(); 

06 var e = new Number(1000000) : 

Uy console.log ("1000000 .toExponential(1) = " + e.toExponential (1)); 
08 console.1og(); 

09 var p = new Number(1000000); 

10 console .1log("1000000 .toPrecision(3) = " + e.toPprecision(3)); 

Tl console.1og(); 


i129 <script> 


关于 【代码 12-6】 的 分 析 如 下 : 

这 段 代 码 分 别 测 试 了 前 面 提 到 的 Number 对 象 的 3 个 方法 。 

第 02 行 代码 通过 new 运算 符 定义 第 一 个 Number 对 象 4d， 并 进行 实例 化 操作 (2 / 3) ， 通 过 
第 03 行 代码 在 浏览 器 控制 台中 输出 计算 结果 。 

第 04 行 代 码 通过 toFixed(3) 方 法 将 第 一 个 Number 对 象 d 进行 四 舍 五 入 , 并 保留 了 小 数 点 后 三 
位 有 效 数 字 。 

第 06 行 代 码 通过 new 运算 符 定义 第 二 个 Number 对 象 e， 并 进行 实例 化 操作 (1000000) 。 

第 07 行 代码 通过 toExponential(1) 方 法 将 第 二 个 Number 对 象 e 转换 为 指数 计数 法 ， 参 数 定义 
为 1 表示 需要 保留 的 小 数位 数 。 

第 09 行 代 码 通过 new 运算 符 定 义 第 三 个 Number 对 象 p， 并 进行 实例 化 操作 (1000000) 。 

第 10 行 代码 通过 toPrecision(3) 方 法 将 第 三 个 Number 对 象 p 进行 在 超出 位 数 后 转换 为 指数 计 
数 法 的 操作 ， 参 数 定义 为 3 表示 有 效 的 位 数 。 

运行 页 面 ， 控 制 台 输出 的 调试 信息 如 图 12.6 所 示 。 
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Developer Tools - ECMAScript in 15-days - http://localhost:63 





[a Inspect Consc Debugc Style Edi Performa Memo Netwc Storac 轩 ~ 园 目 窗 日 


会 时 Filteroutput [JPersistLogs 
2/3 = ©.6666666666666666 chl2-es-obj-number.html:24:3 

| (2/3).toFixed(3) = 6.667 chl2-es-obj-number.html:25:3 
chl2-es-obj-number .html :26:3 

1960666 .toExponential(1) = 1.0e+6 chl2-es-obj-number.html:28:3 
chl2-es-obj-number .html :29:3 

10600000,toPrecision(3) = 1.00e+6 chl2-es-obj-number,html:;31:3 


chl2-es-obj-number .html :32:3 


入 四 ie 


者 


如 图 12.6 所 示 ， 从 第 03 和 第 04 行 代码 输出 的 结果 对 比 来 看 ，toFixed(3) 方 法 已 成 功 将 计算 结 
果 按 照 参数 指定 的 位 数 3， 进 行 了 四 舍 五 入 和 保留 小 数位 数 的 操作 。 

从 第 07 行 代码 输出 的 结果 来 看 ，toExponential(1) 方 法 已 成 功 将 数字 1000000 按照 指数 计数 法 
进行 了 转换 。 

从 第 10 行 代码 输出 的 结果 来 看 ，toPrecision(3) 方 法 已 成 功 将 数字 1000000 按照 参数 定义 有 效 
位 数 3， 进 行 了 转换 为 指数 计数 法 的 操作 。 


12.6 ”Boolean 对 象 


在 ECMAScript 语法 规范 中 ，Boolean 对 象 只 有 两 个 值 ， 即 true 与 false。 在 使 用 Boolean 对 象 
时 ， 有 构造 函数 和 转换 函数 两 种 方式 ， 它 们 在 ECMA-262 规范 中 的 具体 说 明 如 下 : 
@ 构造 函数 方式 : 通过 在 Boolean0) 函 数 前 使 用 运算 符 new， 将 参数 转换 为 一 个 布尔 值 ， 并 返回 
一 个 包含 该 值 的 Boolean 对 象 。 
@ 转换 函数 方式 : 在 Boolean() 函 数 前 不 使 用 运算 符 new， 将 参数 转换 为 一 个 原始 的 布尔 值 ， 并 
返回 该 值 。 
下 面 是 一 个 使 用 Boolean 对 象 的 代码 示例 ( 详 见 源 代 码 ch12 目录 中 的 ch12-es-obj-boolean.html 
文件 ) 。 
【代码 12-7】 


01 <script type="text/javascript"> 


02 Var bTrue = new Boolean (true); 

U3 console -log true tO string is birue.toSstring()): 

04 Var bone = Boolean(1); 

05 console lo0og ("Boolean(l) to string as "TT bOne.toString()): 
06 console.1og(); 

Mf var bFalse = new Boolean(false); 

08 console. logq("false to string lo"™ Hbralse. tootring(l)): 

09 Var bZero = Boolean (0) : 

10 console .log ("Boolean (0) to String is "” + bZero.toString()); 
可 Var bNull = Boolean (); 

1 console log ("Boolean() to string T7939 "ToNulltoSstrng())e: 
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工 了 console .log() : 
T1407/seript> 


关于 【代码 12-7】 的 分 析 如 下 : 

这 段 代码 分 别 测试 了 前 面 提 到 的 Boolean 对 象 的 构造 函数 和 转换 函数 的 使 用 方法 。 

第 02 行 代码 通过 new 运算 符 定 义 第 一 个 Boolean 对 象 bTrue， 并 进行 实例 化 操作 (true) ， 通 
过 第 03 行 代码 使 用 toString(0) 方 法 在 浏览 器 控制 台中 输出 结果 。 

第 04 行 代码 通过 new 运算 从 定义 第 二 个 Boolean 对 象 bone， 并 进行 实例 化 操作 〈1) ， 通 过 
第 05 行 代码 使 用 toString() 方 法 在 浏览 器 控制 台中 输出 结果 。 

第 07 行 代码 通过 new 运算 符 定 义 第 三 个 Boolean 对 象 bFalse， 并 进行 实例 化 操作 (false〉， 
通过 第 08 行 代码 使 用 toString(0) 方 法 在 浏览 器 控制 台中 输出 结果 。 

第 09 行 代码 通过 new 运算 符 定 义 第 四 个 Boolean 对 象 bZreo， 并 进行 实例 化 操作 〈0) ， 通 过 
第 10 行 代 码 使 用 toString() 方 法 在 浏览 器 控制 台中 输出 结果 。 

第 11 行 代码 通过 new 运算 符 定义 第 五 个 Boolean 对 象 bNull， 注 意 该 方法 在 实例 化 时 并 没有 
参数 ， 通 过 第 12 行 代 码 使 用 toString() 方 法 在 浏览 器 控制 台中 输出 结果 。 

运行 页 面 ， 控 制 台 输出 的 调试 信息 如 图 12.7 所 示 。 

如 图 12.7 所 示 ， 从 第 03 和 第 08 行 代码 输出 的 结果 对 比 来 看 ， 使 用 运算 符 new 的 构造 函数 方 
式 可 以 成 功 创建 布尔 值 true 和 false 的 Boolean 对 象 。 

从 第 05 和 第 10 行 代 码 输出 的 结果 对 比 来 看 ， 不 使 用 运算 符 new 的 转换 函数 方式 同样 可 以 得 
到 布尔 值 true 和 false。 

另外 ,从 第 12 行 代码 的 输出 结果 来 看 , 使 用 不 带 参数 的 Boolean() 函 数 时 得 到 的 返回 值 是 false， 
这 一 点 需要 读者 多 加 注意 。 


Developer Tools - ECMAScript in 15-days - http://localhost:63 





Inspect Consc Debugc Style Edi Performa Memo Netwc Storat 轩 ~" 轩 日 窗 日 可 


兽 时 Filter output [_ | Persist Logs 


true to string is true 
Boolean(1) to string is true 


false to string is false 
BooLean(6) to string is false 
Boolean() to string is false 


chl2-es-obj-boolean.html :24:3 
chl2-es-obj-boolean.html :26:3 
chl2-es-obj-boolean.html:27:3 
chl2-es-obj-boolean.html :29:3 
chl2-es-obj-boolean.html :31:3 
chl2-es-obj-boolean.html :33:3 


chl2-es-obj-boolean.html :34:3 


TT 


Desesmmasnennsnnmasmnnnnnnnannsnamannnnnnnannnnnnnnnannninnnnnnnnnnnnnmnannnnnmnnnnnnnnnnnnnmannnnnnnnnnnnnnnnnnnnnnnmnnnnnnnnnnnmnmnnnnnnnnnnn 


12.7 ”Boolean 对 象 方法 


12.7 ”Date 对 象 


在 ECMAScript 语法 规范 中 ，Date 对 象 是 用 于 处 理 日 期 和 时 间 的 包装 类 型 ， 通 过 应 用 Date 对 
象 可 以 很 方便 地 操作 日 期 和 时 间 。 
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Date 对 象 基础 


Date 对 象 提供 了 一 系列 专用 于 处 理 日 期 和 时 间 的 方法 ， 在 前 面 章节 中 己 经 介绍 了 几 个 比较 营 
用 的 方法 ， 本 小 节 再 补充 几 个 ECMA-262 规范 中 提供 的 常用 方法 。 


setFullYear(year month, day) 方 法 : 用 于 设置 年 份 。 具 体 参 数 和 返回 值 的 描述 如 下 : 

> year: 该 参数 是 必需 的 ， 表 示 年 份 的 四 位 整数 ， 用 本 地 时 间 来 表示 。 

> month: 该 参数 是 可 选 的 ， 表 示 月 份 的 数值 (0~ 11) ， 用 本 地 时 间 来 表示 。 

> day: 该 参数 是 可 选 的 ， 表 示 月 中 某 一 天 的 数值 (1~31) ， 用 本 地 时 间 来 表示 。 

> 返回 值 : 返回 被 调整 过 的 日 期 的 毫秒 数 。 

setMonth(month, day) 方 法 : 用 于 设置 月 份 。 有 具体 参数 描述 如 下 : 

> month: 该 参数 是 必需 的 ， 表 示 月 份 的 数值 介 于 0 (一 月 ) ~11 (十 二 月 ) 之 间 。 

> day: 该 参数 是 可 选 的 ， 表 示 月 中 某 一 天 的 数值 (1~31) ， 用 本 地 时 间 来 表示 。 

> 返回 值 : 返回 被 调整 过 的 日 期 的 毫秒 数 。 

setDate(day) 方 法 : 用 于 设置 月 中 的 某 一 和 天。 具体 参数 和 返回 值 的 描述 如 下 : 

> day: 该 参数 是 必需 的 ， 表 示 月 中 某 一 天 的 数值 (1~31) 。 

> 返回 值 : 返回 被 调整 过 的 日 期 的 毫秒 数 。 

setHours(hour, min, sec, millisec) 方 法 : 用 于 设置 时 间 中 的 小 时 字段 。 具 体 参 数 和 返回 值 的 描述 

如 下 : 

> hour: 该 参数 是 必需 的 ， 表 示 小 时 的 数值 ， 介 于 0 (午夜 ) ~23 (晚上 11 点 ) 之 间 ， 用 本 
地 时 间 来 表示 。 

> min: 该 参数 是 可 选 的 ， 表 示 分 钟 的 数值 (0 ~59) ， 用 本 地 时 间 来 表示 。 

> sec: 该 参数 是 可 选 的 ， 表 示 秒 的 数值 (0~ 59 ) ， 用 本 地 时 间 来 表示 。 

> millisec: 该 参数 是 可 选 的 ， 表 示 毫 秒 的 数值 (0 ~999) ， 用 本 地 时 间 来 表示 。 

> 返回 值 : 返回 被 调整 过 的 日 期 的 毫秒 数 。 

setMinutes(min, sec, millisec) 方 法 : 用 于 设置 时 间 中 的 分 钟 字段 。 具 体 参 数 和 返回 值 的 描述 如 

下 

> min: 该 参数 是 必需 的 ， 表 示 分 钟 的 数值 (0 ~59) ， 用 本 地 时 间 来 表示 。 

> sec: 该 参数 是 可 选 的 ， 表 示 秒 的 数值 (0~59) ， 用 本 地 时 间 来 表示 。 

> millisec: 该 参数 是 可 选 的 ， 表 示 毫 秒 的 数值 (0~ 999) ， 用 本 地 时 间 来 表示 。 

> 返回 值 : 返回 被 调整 过 的 日 期 的 毫秒 数 。 

setSeconds(sec, millisec) 方 法 : 用 于 设置 时 间 中 的 秒 数字 段 。 有 具体 参数 和 返回 值 的 描述 如 下 : 

> sec: 该 参数 是 必需 的 ， 表 示 秒 数 的 数值 (0~59) ， 用 本 地 时 间 来 表示 。 

> millisec: 该 参数 是 可 选 的， 表示 毫秒 的 数值 (0 ~999) ， 用 本 地 时 间 来 表示 。 

> 返回 值 : 返回 被 调整 过 的 日 期 的 毫秒 数 。 

setMilliseconds(millisec) 方 法 : 用 于 设置 时 间 中 的 毫秒 数字 段 。 具体 参数 和 返回 值 的 描述 如 下 : 

> millisec: 该 参数 是 必需 的 ， 表 示 毫 秒 数 的 数值 (0~ 999 ) ， 用 本 地 时 间 来 表示 。 

> 返回 值 : 返回 被 调整 过 的 日 期 的 毫秒 数 。 
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setTime(millisec) 方 法 : 通过 毫秒 数 设 置 Date 对 象 。 具 体 参 数 和 返回 值 的 描述 如 下 : 

> millisec: 该 参数 是 必需 的 ， 表 示 要 设置 的 日 期 和 时 间距 离 GMT 时 间 1970 年 1 月 1 日 0 
点 之 间 的 毫秒 数 。 

> 返回 值 : 返回 被 设置 的 毫秒 数 。 

toLocaleString() 方 法 : 该 方法 可 根据 本 地 时 间 把 Date 对 象 转 换 为 字符 串 ， 并 返回 结果 。 


12.7.2 Date 对 象 应 用 (一) 


通过 上 一 小 节 介 绍 的 Date 对 象 的 几 个 方法 ， 可 以 对 年 、 月 、 日 及 时 间 等 参数 进行 读 取 和 设置 。 
下 面 是 一 个 使 用 前 面 提 到 的 Date 对 象 方 法 的 代码 示例 ( 详 见 源 代 码 ch12 目录 中 的 ch12-es-obj- 
date.html 文件 ) 。 
【代码 12-8】 


QL 
UZ 
03 
04 
US 
06 
07 
08 
Us 
10 
by 
3 
14 
15 
16 
Tn 
15 


<script type="text/javascript"> 
Var date = new Date (); 
date.setFullYear (2008) : 
console.log("setFullYear(2008) = "); 
console .log (date); 
dqate.sSsetFEullYear (2008, 7, 8); 
console.log ("setFullYear(2008,7,8) = "); 
Console .log (date); 
date.setMonth (0) : 
console .log("SsetMonth (0) = "); 
Console .log (date); 
date.setMonth (0, 1) : 
console.log("setMonth(0,1) = "); 
console.log (date); 
date.setDate(15); 
console.log("setData(15) = ");，; 
console.log (date); 

</script> 


关于 【代码 12-8】 的 分 析 如 下 : 

这 段 代 码 分 别 测试 了 前 面 提 到 的 Date 对 象 的 几 个 方法 。 

第 02 行 代 码 通过 new 运算 符 定 义 一 个 Date 对 象 date。 

第 03 行 代 码 通过 调用 setFullYear(2008) 方 法 将 时 间 设 置 到 2008 年 。 

第 06 行 代码 通过 调用 setFullYear(2008, 7, 8) 方 法 将 时 间 设 置 到 2008 年 8 月 8 日 。 

第 09 行 代码 通过 调用 setMonth(0) 方 法 将 时 间 设 置 到 1 月 份 。 

第 12 行 代 码 通 过 调用 setMonth(0, 1) 方 法 将 时 间 设 置 到 1 月 1 日 。 

第 15 行 代 码 通过 调用 setDate(15) 方 法 将 时 间 设 置 到 15 日 。 

运行 页 面 ， 控 制 台 输出 的 调试 信息 如 图 12.8 所 示 。 

如 图 12.8 所 示 ， 从 第 05 行 代码 输出 的 结果 来 看 ，setFullYear(2008) 方 法 成 功 将 日 期 的 年 份 设 
置 为 2008 年 。 注 意 ， 因 为 第 03 行 代码 调用 的 setFullYear(0 方 法 仅 定 义 了 一 个 年 份 的 参数 ， 所 以 月 
份 和 天 数 保 留 了 系统 当前 的 日 期 。 

从 第 08 行 代码 输出 的 结果 来 看 ，setFullYear(2008,7,8) 方 法 成 功 将 日 期 设置 为 2008 年 8 月 8 
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日 。 因 为 第 06 行 代码 调用 的 setFullYear() 方 法 定义 了 全 部 年 月 日 的 参数 ， 所 以 日 期 全 部 被 修改 成 


功 了 。 


Developer Tools - ECMAScript in 15-days - http://ocalh 


[a Inspec Cons Debuo Style Er Performr Mem Netw Storz 轩 " 园 目 窗 日 可 


曾 时 Filter output 

setFullYear(2008) = 

| * Date 2608-01-15T14:43:56.856Z 
setFullYear(2008,7,8) = 
* Date 2808-01-15T14:43:56.856Z 
setMonth(0) = 
b Date 2008-01-15T14:43:56.856Z 
setMonth{(0,1) = 
* Date 2808-01-15T14:43:56.856Z 
setDatal(15)】 = 
y Date 28008-01-15T14:43:56.856Z 


ch12- 
ch12- 
ch12- 


12.8 ”Date 对 象 应 用 (1) 


从 第 11 行 代码 输出 的 结果 来 看 ，setMonth(0) 方 法 成 功 将 日 期 的 月 份 设置 为 2008 年 1 月 8 日 ， 
而 年 份 和 天 数 仍 保留 第 06 行 代码 设置 的 日 期 。 
从 第 14 行 代码 输出 的 结果 来 看 ,setMonth(0,1) 方 法 成 功 将 日 期 的 月 份 设置 为 2008 年 1 月 1 日 ， 
而 年 份 仍 保留 第 06 行 代码 设置 的 日 期 。 
从 第 17 行 代码 输出 的 结果 来 看 ，setDate(15) 方 法 成 功 将 日 期 的 天 数 设置 为 2008 年 1 月 15 日， 
而 年 份 和 月 份 仍 保留 第 14 行 代码 设置 的 日 期 。 


12.7.3” ”Date 对 和 象 应 用 (二 ) 


_| Persist Logs 
chl2-es-obj-date.html:25:3 


date 


j-date. 
j-date. 


htmt :; 
htmt : 
htmt : 


W WW WW NMW W WMW W 


下 面 再 看 一 个 使 用 另外 几 个 Date 对象 方 法 的 代码 示例 ( 详 见 源 代 码 ch12 目录 中 的 ch12-es-obj- 
date-time.html 文件 ) 。 
【代码 12-9】 


01 
0 
US 
04 
(ks 
06 
07 
08 
hE, 
二 
1 
12 
| 
14 
下 与 
16 
I 
LG 


<script type="text/javascript"> 


Var date = new Date(); 
consoles log (“Cureent Time =e")s 
console.log (date.toLocaleString()); 
console.1og(); 
console.log("setHours(8) :"); 
date.setHours (8) ; 
console.log (aate .toLocaleString () ) 
console.log("setHours(8,8,8) :"); 
date.setHours (8, 8, 8); 

console.log (date.toLocaleString () ) ; 
console.log("setMinutes (30) :"); 
date.setMinutes(30); 

console.log (date.toLocaleString()); 
console.log ("setMinutes (30,30) :"); 
date.setMinutes(30,30); 

console.log (date.toLocaleString()); 
console.log("setSeconds (0) :"); 
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19 
20 


date.setSeconds (0); 

console.log (date.toLocaleString()); 

console.log ("setTime (1234567890) :"); 

date.setTime(1234567890); 

console.log (date.toLocaleString()); 
</acript> 


关于 【代码 12-9】 的 分 析 如 下 : 

这 段 代 码 分 别 测 试 了 前 面 提 到 的 Date 对 象 的 另外 几 个 方法 。 

第 02 行 代码 通过 new 运算 符 定义 一 个 Date 对 象 date,， 此 时 对 象 date 相当 于 获取 了 当前 时 间 。 

第 04 行 代码 通过 调用 toLocaleString() 方 法 ， 将 对 象 date 的 当前 时 间 转 化 为 本 地 时 间 格 式 ， 并 
在 浏览 器 控制 台中 进行 输出 。 

第 07 行 代码 通过 调用 setHours(8) 方 法 将 小 时 数 设 置 为 8 时 。 

第 10 行 代码 通过 调用 setHours(8, 8, 8) 方 法 将 时 间 数 设置 为 8 时 8 分 8 秒 。 

第 13 行 代码 通过 调用 setMinutes(30) 方 法 将 分 钟 数 设置 为 30 分 。 

第 16 行 代 码 通过 调用 setMinutes(30, 30) 方 法 将 分 钟 数 和 秒 数 设置 为 30 分 30 秒 。 

第 19 行 代码 通过 调用 setSeconds(0) 方 法 将 秒 数 设置 为 0 秒 。 

第 22 行 代码 通过 调用 setTime(1234567890) 方 法 ,将 时 间 设 置 为 距 1970 年 1 月 1 日 0 时 0 分 0 
秒 往 后 1234567890 毫秒 数 的 时 间 。 

运行 页 面 ， 控 制 台 输出 的 调试 信息 如 图 12.9 所 示 。 


Developer Tools - ECMAScript in 15-days - http://localhost:63342/ 
中 ”Inspect' Consol Debugg' Style Edit Performan Memor Networ Storag 团 " 园 目 窜 日 可 





闪 守 Filter output _| Persist Logs 
Current Time : chl2-es-obj-date-time,.html :24:3 
S/7/2018, 16:45:25 PM chl2-es-obj-date-time,html :25:3 

chl2-es-obj-date-time,.html ;26:3 
setHours(8) : chl2-es-obj-date-time,.html:27:3 
5/7/2018, 8:45:25 AM chl2-es-obj-date-time.html :29:3 
setHours(8,8,8) : chl2-es-obj-date-time.html :30:3 

| 5/7/2018, 8:68:68 AM chl2-es-obj-date-time,html:32:3 
setMinutes(30) : chl2-es-obj-date-time.html :33:3 
5S/7/2018, 8:30:08 AM chl2-es-obj-date-time,.html :35:3 
setMinutes(30,30) : chl2-es-obj-date-time.html:36:3 
5/7/2018, 8:30:386 AM chl2-es-obj-date-time.html :38:3 
setSeconds(0) : chl2-es-obj-date-time.html :39:3 
5/7/2018, 8:30:068 AM chl2-es-obj-date-time,html:41:3 
setTime(1234567896) : chl2-es-obj-date-time,html :42:3 
1/15/1970, 2:56:867 PM chl2-es-obj-date-time.html:44:3 

>| 


OO 


图 12.9 Date 对 象 应 用 (2) 


如 图 12.9 所 示 ， 从 第 04 行 代码 输出 的 结果 来 看 ，toLocaleString() 方 法 成 功 将 当前 时 间 转 换 为 
本 地 时 间 格 式 。 

从 第 08 行 代 人 码 输出 的 结果 来 看 ，setHours(8) 方 法 成 功 将 小 时 数 设置 为 8 时， 同时 年 、 月 、 日 、 
分 钟 和 秒 数 都 保持 原始 数值 。 

从 第 11 行 代 码 输 出 的 结果 来 看 ，setHours(8，8，8) 方 法 成 功 将 小 时 数 、 分 钟 数 和 秒 数 设 置 为 8 
时 8 分 8 秒 。 

从 第 14 行 代 码 输出 的 结果 来 看 ，setMinutes(30) 方 法 成 功 将 分 钟 数 设置 为 30 分 ， 而 小 时 数 和 
秒 数 都 保留 第 10 行 代码 的 设置 。 
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从 第 17 行 代 码 输出 的 结果 来 看 ，setMinutes(30,30) 方 法 成 功 将 分 钟 数 和 秒 数 设 置 为 30 分 30 
秒 ， 而 小 时 数 仍 保留 第 10 行 代码 的 设置 。 

从 第 20 行 代码 输出 的 结果 来 看 ，setSeconds(0) 方 法 成 功 将 秒 数 设置 为 0 秒 ， 而 小 时 数 和 分 钟 
分 别 沿用 了 第 10 行 和 第 16 行 代 码 的 设置 。 

从 第 23 行 代码 输出 的 结果 来 看 , 通过 setTime(1234567890) 方 法 成 功 将 时 间 设 置 为 距 1970 年 1 
月 1 日 0 时 0 分 0 秒 往 后 1234567890 毫秒 数 的 时 间 (具体 时 间 是 1970/1/15 下 午 2:56:07) 。 


12.8 ”本 癌 小 结 


本 章 主 要 介绍 了 ECMAScript 语法 规范 中 关于 对 象 分 类 的 知识 ， 包 括 基 础 的 Object 对 象 和 入 
规 的 String、Number、Array、Boolean 和 Date 对 象 等 方面 的 内 容 ， 并 通过 一 些 具 体 实 例 进 行 了 讲 
解 。 


pa 





对 象 新 特性 


在 ECMAScript 6 版 本 语法 规范 中 为 对 象 增 加 了 许多 新 特性 ， 如 对 象 属性 的 简洁 表示 法 、 符 号 
对 象 Symbol、 集 合 对 象 Set 和 Map 等 ， 本 和 草 将 介绍 这 些 新 特性 及 其 使 用 方法 。 


13.1 对 象 属性 的 简洁 表示 法 


ECMAScript 6 语法 规范 为 对 象 属性 新 增 了 一 种 简洁 表示 法 ， 通 过 这 种 简洁 的 定义 方式 ， 可 以 
为 创建 对 象 和 函数 返回 值 提供 更 快捷 的 操作 。 
下 面 是 一 个 使 用 对 象 属性 简洁 表示 法 的 代码 示例 ( 详 见 源 代 码 ch13 目录 中 的 ch13-es-obj-new- 
prop.html 文件 ) 。 
【代码 13-1 】 


01 <script type="text/javascript"> 


02 Var username = "tina"; 

03 Var email = "tina@email .com"; 

04 Var obj = { 

05 lo BP A 

06 username, 

07 email, 

08 EECEmEOI Ti 

09 eonsgoles liont nie "TT Thiseud)e 

10 console.log("username : " + this.username); 
el console.log("email : " + this.email); 
有 be } 

3 }; 

14 console.1o0g("------— print obj ------ a 

ey obi DELntintol 


LO /cript> 


第 13 章 ”对象 新 特性 


关于 【代码 13-1】 的 分 析 如 下 : 


这 段 代 人 码 主要 就 是 定义 了 一 个 对 象 ， 包 括 3 个 属性 和 一 个 函数 。 其 中 ， 属 性 和 函数 的 定义 均 


采用 了 简洁 表示 法 。 


第 06 行 代 码 定义 一 个 属性 username。 注 意 ， 这 里 并 没有 定义 属性 值 ， 但 第 02 行 代码 定义 了 同名 
的 变量 username 并 进行 初始 化 赋值 "tina"， 此 时 属性 username 的 值 就 取 自 于 同名 变量 username 的 值 。 


第 07 行 代 码 定 义 的 属性 email 与 第 06 行 代码 定义 的 属性 usemame 类 似 。 


第 08 一 12 行 代码 定义 一 个 函数 printImnfo0， 用 于 输出 属性 信息 。 注 意 ， 这 里 同样 使 用 了 没有 


关键 字 function 来 定义 的 简洁 表示 法 。 


运行 页 面 ， 控 制 台 输 出 的 调试 信息 如 图 13.1 所 示 。 通 过 对 象 属性 简洁 表示 法 定义 的 对 象 ， 与 


传统 方式 定义 的 对 象 功能 上 完全 一 致 ， 同 时 可 以 提高 代码 的 编写 效率 。 





Developer Tools - ECMAScript in 15-days - http://localhost:63342, 
中 ”Inspectk Consol Debugg' Style Edit Performar Memor Networ Storag 轩 " 园 上 日 窗口 


价 时 Filteroutput LjPersistLogs 
------ print obj ------ chl3-es-obj-new-prop.html :35:3 
3 2 2 chl3-es-obj-new-prop.html:30:8 
username : tina chl3-es-obj-new-prop.html:31:17 
email : tina@email .com chl3-es-obj-new-prop.html:32:17 

S| ! 


13.1 对 象 属性 简洁 表示 法 (1) 


下 面 继续 看 一 个 使 用 对 象 属性 简洁 表示 法 定义 函数 返回 值 的 代码 示例 《〈 详 见 源 代 码 ch13 目录 


的 中 ch13-es-obj-new-prop-return.html 文件 ) 。 
【代码 13-2 】 


01 <script type="text/javascript"> 


02 function getUserinfo() { 

03 var Ld = 73 

04 Var userinfo = "tina"; 

05 Var email = "tina@email .com"; 
06 return {id, userinfo, email}; 
也 区 } 

08 Var info = getUserinfo(); 

09 eonsolese Log (info)s 


100m /seript> 


关于 【代码 13-2】 的 分 析 如 下 : 


这 段 代 码 主要 就 是 定义 了 一 个 函数 ， 其 中 包括 3 个 变量 。 第 06 行 代码 的 返回 值 使 用 了 对 象 属 


性 的 简洁 表示 法 。 


运行 页 面 ， 控 制 台 输出 的 调试 信息 如 图 13.2 所 示 。 通 过 对 象 属性 简洁 表示 法 可 以 简化 函数 返 


回 值 的 定义 ， 效 率 提高 还 是 非常 显 兰 的 。 
Developer Tools - ECMAScript in 15-days - http://localhc 


Ca Inspec Cons Debug Style Ec Perform Mem' Netw Stors 轩 " 园 目 容 日 可 


谷 时 Filter output | Persist Logs 


» Object { id: "123", userinfo: "tina", .New-prop-return.html :30:3 
email: "tina@email .com” } 


ey 


13.2 ”对象 属 性 简洁 表示 法 (2) 
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13.2 Symbol 数据 类 型 


符号 对 象 Symbol 是 ECMAScript 6 语法 规范 中 新 增 的 数据 类 型 , 通过 Symbol 可 以 创建 一 个 唯 
一 的 值 ， 而 该 特性 使 得 Symbol 非常 适合 作为 标识 符 来 使 用 。 下 面 通过 几 个 简单 的 代码 实例 介绍 符 
号 对 象 Symbol 的 使 用 方法 。 


13.2.1 定义 Symbol 对 象 


定义 Symbol 对 象 的 方法 是 通过 函数 Symbol(0 来 生成 的 。 先 看 一 段 使 用 函数 Symbol0 生 成 
Symbol 对 象 的 代码 〈 详 见 源 代 码 ch13 目录 中 的 ch13-es-symbol-define.html 文件 ) 。 
【代码 13-3 】 


01 <script type="text/javascript"> 


02 console.log("var s = Symbol ();"); 
人 03 Var s = Symbol () : 
04 sonsolesliog( Eypaeaor es EVDSCESJ 


Qo </seripe> 


关于 【代码 13-3】 的 分 析 如 下 : 

第 03 行 代 码 通过 函数 Symbol0 定 义 了 一 个 Symbol 对 象 s。 

第 04 行 代码 通过 运算 符 typeof 检查 对 象 s 的 类 型 ， 并 将 结果 输出 到 浏览 器 控制 台中 。 

运行 页 面 ， 控 制 台 输出 的 调试 信息 如 图 13.3 所 示 。 从 浏览 器 控制 台 的 输出 结果 来 看 ， 对 象 s 
的 类 型 是 Symbol， 而 不 是 字符 串 等 其 他 类 型 。 





Developer Tools - ECMAScript in 15-days - http://localhost: 
[Ca Inspec Consc Debug' Style Ed PerFormz Memc Netwc Stora 半 " 轩 上 目 窜 口 了 可 


商 是 Filter output |_| Persist Logs 
var s = SymbotLf ); “Obj-symbol-define.html:23:9 
typeof s : symbol “Obj-symbol-define.htmil:25:9 

p> 


assessmenteeeeeseeececeeoeeeoeoeeeeoeeeoeeoeeeeeeeeeeceeeeeeeeeees 和 


13.3 定义 Symbol 对 和 象 


13.2.2 ”Symbol 对 象 的 唯一 性 


ECMAScript 语法 规范 中 规定 了 凡是 通过 函数 Symbol0 生 成 的 Symbol 对 象 均 是 唯一 的 ， 或 者 
说 是 独一无二 的 。 这 个 概念 该 如 何 理解 呢 ? 
下 面 是 一 个 表明 Symbol 对 象 具 有 唯一 性 的 代码 示例 〈 详 见 源 代 码 ch13 目录 中 的 ch13-es- 
symbol-unique.html 文件 ) 。 
【代码 13-4】 


01 <script type="text/javascript"> 
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02 consoleslog( var Sl = Symbol(y>"): 
Us Var sl = Symbol():; 

04 console .log("var s2 = Symbol ();"); 
05 Var S2 = Symbol():; 

06 if (S1 === S2) 

07 console.log("sl === S2 ? true"); 
08 else 

09 console.log("sl === S2 ? false") : 


10m /acripk> 


关于 【代码 13-4】 的 分 析 如 下 : 

第 03 行 和 第 05 行 代码 同时 通过 函数 SymbolO 定 义 了 两 个 Symbol 对 象 sl 和 s2。 

第 06 一 09 行 代码 通过 让 条 件 选择 语句 判断 对 象 s1 和 对 象 s2 是 否 严 格 相等 ， 并 将 结果 输出 到 
浏览 器 控制 台中 。 

运行 页 面 ， 控 制 台 输出 的 调试 信息 如 图 13.4 所 示 。 虽 然 根 据 【 代 码 13-4】 的 定义 可 以 看 到 对 
象 sl 和 对 象 s2 均 是 Symbol 数据 类 型 ， 但 从 浏览 器 控制 台 的 输出 结果 来 看 ， 对 象 sl 和 对 象 s2 是 
非 严 格 相等 的 。 





Developer Tools - ECMAScript in 15-days - http://localhost:633 


[Ca Inspect Conso Debugc Style Edi Performa Memo Netwo Storac 轩 " 轩 上 日 容 日 可 


从 时 Filteroutput _| Persist Logs 
Var sl = Symbol(); -0bj-symbol -unique.html:23:9 
Var s2 = Symbol(); -0bj-symbol-unique.html:25:9 
sl === 5S2 ?了 false “Obj-symbol -unique.html:30:13 
>| 


OPO 


13.4 Symbol 对 象 唯一 性 


这 个 结果 对 于 常规 ECMAScript 对 象 是 无 法 得 到 的 ,但 对 于 ECMAScript 6 新 增 的 Symbol 数据 
类 型 就 是 如 此 。 在 ECMAScript 语法 规范 中 , 如 此 设计 Symbol 数据 类 型 自然 有 其 日 的 , 通过 Symbol 
就 可 以 实现 对 象 自 定义 属性 的 唯一 性 了 。 


13.2.3 ”Symbol 定义 属性 名 


通过 前 文 的 介绍 我 们 知道 了 Symbol 对 象 的 唯一 性 ， 可 以 借助 这 个 特性 为 对 象 定 义 属 性 名 。 因 
为 通过 Symbol 数据 类 型 定义 的 属性 名 都 是 独一无二 的 ， 所 以 也 就 可 以 保证 自 定 义 属性 名 不 会 产生 
冲突 ， 这 一 点 在 大 型 的 项 目 开 发 中 非常 有 用 。 
下 面 是 一 个 通过 Symbol 定义 属性 名 的 代码 示例 ( 详 见 源 代码 ch13 目录 中 的 ch13-es-symbol- 
prop-name.html 文件 ) 。 
【代码 13-5】 


01 <script type="text/javascript"> 


02 console.log("var s = Symbol ();"); 
03 Var s = Symbol ();} 

04 var obj = {}; 

号 obj[s] = "Symbol DataType"; 

06 eonsole clog opalsle bE opalsl 
OQ Var obj2 = { 
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08 [s]: "Symbol DataType 2" 
09 }; 
10 econsoles iog( moby2lsl GOD TS 


> 


关于 【代码 13-5】 的 分 析 如 下 : 

第 03 行 代码 通过 函数 Symbol0 定 义 了 一 个 Symbol 对 象 s。 

第 04 和 第 05 行 代码 是 一 种 定义 对 象 属性 名 的 方式 ; 第 07 一 09 行 代码 是 另 一 种 定义 对 象 属性 
名 的 方式 。 这 两 种 方式 都 是 可 行 的 ， 设 计 人 员 可 上 自行 选择 。 

运行 页 面 ， 控 制 台 输出 的 调试 信息 如 图 13.5 所 示 。 从 浏览 器 控制 台 的 输出 结果 来 看 ， 两 种 定 
义 对 象 属 性 名 的 方式 都 得 到 了 正确 的 结果 。 


Developer Tools - ECMAScript in 15-days - http://localthost:63342/V 





[Inspectc Consol Debugg: Style Edit Performan Memor Networ Storag 回 - 园 日 宗 口 可 


会 时 Filter output _ | Persist Logs 
Var s = Symbol(); “Obj-symbol-prop-name.html :23:9 
obj[s]l : Symbol DataType Re ~0bj-symbol-prop-name.html :27:9 
obj2[{s] : Symbol DataType 2 “0bj-symbol-prop-name.html:31:9 


Dessert tlt tt ttt tt tt tt ttt tt tt tt tt tt ttt 


besesessssssesssesesnsnsnenenesesesnsntnenenesesesnsnsnnnenennsesesnnnnnsaesnnnnnnnesasnsnnnnpnnntnnn antaresnnntneennnnenennnnnennnn ann nnn 


13.5 ”Symbol 定义 属性 名 


13.3 ”Set 数据 类 型 


ECMAScript 6 语法 规范 中 新 增 了 一 个 集合 类 的 数据 类 型 
复元 素 的 有 序列 表 ， 这 点 与 传统 数组 类 型 是 不 同 的 。 





Set 类 型 ,该 类 型 是 一 种 包含 无 重 


13.3.1 定义 和 遍历 Set 数据 类 型 


定义 Set 数据 类 型 的 方式 与 定义 传统 ECMAScript 对 象 的 方式 基本 一 致 , 即 通过 运算 符 new 来 
生成 一 个 Set 类 型 对 象 ， 并 进行 初始 化 操作 。 
下 面 是 一 个 定义 Set 数据 类 型 的 代码 示例 〈 详 见 源 代码 ch13 目录 中 的 ch13-es-obj-set-define. 
html 文件 ) 。 
【代码 13-6】 


01 <script type="text/javascript"> 


[02 Var set = new Set(); 
03 set.add (1); 

04 set.add ("a"); 

05 set.adqd (2); 

06 Sst add( oy: 

OR set.add (3); 

08 set.add("c"); 

09 for (let s of set) { 
1 console.1og(s); 
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} 
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ep sl ol) ee. 


关于 【代码 13-6】 的 分 析 如 下 : 

第 02 行 代码 通过 new 运算 符 定义 了 一 个 Set 数据 类 型 对 象 set。 

第 03 一 08 行 代 码 通过 Set 数据 类 型 的 add() 方 法 对 对 象 set 进行 初始 化 操作 。 注 意 ， 初 始 化 的 
数据 类 型 同时 包括 整数 和 字符 类 型 。 

第 09 一 11 行 代码 通过 for...of... 循 环 迭 代 语 句 将 对 象 set 的 内 容 输出 到 浏览 器 控制 台中 。 

运行 页 面 ， 控 制 台 输 出 的 调试 信息 如 图 13.6 所 示 。 从 浏览 器 控制 台 的 输出 结果 来 看 ， 通 过 
for...of... 循 环 友 代 语句 可 以 遍历 Set 类 型 对 象 。 


13.3.2 


01 
02 
03 
04 
05 
06 
07 
08 





Developer Tools - ECMAScript in 15-days - http://localhost:63342/Webs 


[a Inspecto Consolt Debugge Style Edito Performanc Memor Networl Storage 轩 " 轩 上 日 肉 唱 可 


闸 时 Filter output Persist Logs 
1 chl3-es-obj-set-define.html:31:13 
a chl3-es-obj-set-define.html:31:13 
2 chl3-es-obj-set-define.html:31:13 
b chl3-es-obj-set-define.html:31:13 
3 chl3-es-obj-set-define.html:31:13 
€ chl3-es-obj-set-define.html:31:13 


ee reoreormoreoomoomoeyrmoomyemyemoemymoeomormen 


esensme smsennenn snesnnens snr nse erennenns msn nn nn nn mnt 


13.6 ”定义 Set 数据 类 型 


判断 Set 集合 中 的 值 


ECMAScript 语法 规范 中 为 Set 数据 类 型 提供 了 一 个 has() 方 法 ， 可 以 用 来 判断 一 个 值 是 否 包 含 
在 Set 集合 中 。 
下 面 是 判断 一 个 值 是 否 包含 在 Set 集合 中 的 代码 示例 〈 详 见 源 代码 ch13 目录 中 的 ch13-es-obj- 
set-has.html 文件 ) 。 
【代码 13-7】 


[ek sh elle 
var 


} 
</acrip 


type="text/javascript"> 
set = new Set(); 
caddlne 
agoulwach 
aaOG Je 
可 De 
adgal(3) 
Ge > 
(let i = 1; i <= 3; i++) { 
JF (se hastiy)elt 
sonsolec og set has To i or ns 
} 


E> 


关于 【代码 13-7】 的 分 析 如 下 : 
第 09 一 13 行 代码 通过 for 循环 语句 定义 了 一 个 自 变 量 i 从 数值 1~3 的 循环 。 
第 10 行 代码 通过 Set 数据 类 型 的 has() 方 法 ， 判 断 for 循环 的 自 变 量 i 的 取 值 是 否 包含 在 Set 
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对 象 中 。 
运行 页 面 ， 控 制 台 输出 的 调试 信息 如 图 13.7 所 示 。 通 过 Set 数据 类 型 的 has() 方 法 成 功 判 断 出 
数值 是 否 包含 在 集合 中 。 


Developer Tools - ECMAScript in 15-days - http://localhost:6334 





Ca Inspect Conso Debugg Style Edil Performal Memo Netwo Storac 轩 ~" 园 目 窗 日 可 


会 是 Filter output _| Persist Logs 
set has 1. chl3-es-obj-set-has.html:32:17 
set has 2. chl3-es-obj-set-has.html:32:17 
set has 3. chl3-es-obj-set-has.html:32:17 

:>| 


13.7 ”判断 数值 是 否 包含 在 Set 集合 中 


13.3.3 ”删除 和 清空 Set 集合 


ECMAScript 语法 规范 中 还 为 Set 数据 类 型 提供 了 删除 delete0 方 法 和 清空 clear(0) 方 法 ， 分 别 用 
来 删除 Set 集合 中 的 某 个 值 和 清空 Set 集合 中 的 全 部 值 。 
下 面 是 一 个 删除 和 清空 Set 集合 中 数据 的 代码 示例 ( 详 见 源 代码 ch13 目录 中 的 ch13-es-obj-set- 
del-clear.html 文件 ) 。 
【代码 13-8】 


01 <script type="text/javascript"> 


02 Var set = new Set(); 

可 Set.add (1) ， 

04 set.add ("a"); 

05 set.add (2); 

06 set.add ("bb") 

07 set.adqd (3); 

08 set.adad("ce"); 

09 console.log("--- init set ---"); 
10 printSset (set); 

TT Fors(let 1 = ls 1 < = 3 El 

1 TF (Set ehast(try)nl 

13 set.delete (i); 

14 } 

5 } 

16 console.log("--—- delete set ---"); 
1 printSet (set); 

18 set.clear(); 

19 console.1log("--— clear set ---"); 
20 printSet (set); 

dl pds 

22 * func --- printSet 

| * @param set 

24 a 

29 function printSet(set) { 

26 Var SSet = "set : "; 

2 for (let Ss of set) i 

8 Seat T= 9 Fm 
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29 } 
3 和 0 console.log(sSet); 
31 } 


S20 i 


关于 【代码 13-8】 的 分 析 如 下 : 

第 11 一 15 行 代码 通过 for 循环 语句 定义 了 一 个 上 日 变量 i 从 数值 1~3 的 循环 。 其中， 第 12 行 代 
码 通过 Set 数据 类 型 的 has0 方 法 ， 判 断 for 循环 的 自 变 量 i 的 取 值 是 否 包 含 在 Set 对 象 中 ; 第 13 行 
代码 通过 Set 数据 类 型 的 delete0 方 法 ， 依 次 删除 每 个 包含 在 Set 对 象 中 的 数据 。 

第 18 行 代码 通过 Set 数据 类 型 的 clear() 方 法 , 在 执行 第 13 行 代码 删除 Set 集合 中 的 数据 之 后 ， 
再 次 清空 Set 对 象 中 全 部 剩余 的 数据 。 

运行 页 面 ， 控 制 台 输出 的 调试 信息 如 图 13.8 所 示 。 通 过 Set 数据 类 型 的 delete0 方 法 和 clear() 
方法 成 功 删 除 和 清空 了 集合 中 的 数据 。 


Developer Tools - ECMAScript in 15-days - http://localhost:633 
[Ca Inspect Conso Debugc Style Edil Performal Memo Netwo Storac 轩 " 园 上 日 肉 口 了 可 





商 时 Filter output _| Persist Logs 
--- init set --- “-Obj-set-del-clear.html:30:9 
epre 1 a Be 3 EE “Obj-set-del-clear.html:S]1:13 
-- delete set --- “~-0Obj-set-del-clear.html:37:9 
SE 下 “Obj-set-del-clear.html:S1:]13 
-- Clear set --- “~-0bj-set-del-clear.html:40:9 
Set : “Obj-set-del-clear.html:S1:13 

> 


| 


13.8 删除 和 清空 Set 集合 中 的 值 


13.4 ”Map 数据 类 型 





ECMAScript 6 语法 规范 中 还 新 增 了 男 一 个 集合 类 的 数据 类 型 Map 类 型 ， 该 类 型 是 一 种 包 


含有 序 键 值 对 的 有 序列 表 ， 其 中 键 和 值 可 以 是 任何 类 型 的 对 象 。 


13.4.1 ”定义 Map 数据 类 型 和 基本 存 取 操作 


定义 Map 数据 类 型 的 方式 与 定义 传统 ECMAScript 对 象 的 方式 基本 一 致 ， 即 通过 运算 符 new 
生成 一 个 Map 类 型 对 象 ， 然 后 分 别 使 用 set(0 方 法 和 get0 方 法 进行 存储 键 值 对 及 键 取 值 的 操作 。 
下 面 是 一 个 定义 Map 数据 类 型 和 进行 基本 存 取 操 作 的 代码 示例 ( 详 见 源 代码 ch13 目录 中 的 
ch13-es-obj-map-basic.html 文件 ) 。 
【代码 13-9】 


01 <script type="text/javascript"> 


02 Var map = new Map(); 
U3 Tap Settle "Aas 
04 maps set (2 "De 
05 map Se 3 em 
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06 console.log("map's size : " + map.size); 

07 for (let i = 1; i <= 3; i++) { 

08 console log( mp tT I map gol 和 > 
09 } 


10 <WsGripte> 


关于 【代码 13-9】 的 分 析 如 下 : 
第 02 行 代 码 通过 new 运算 符 定 义 了 一 个 Map 数据 类 型 对 象 map。 


第 03 一 05 行 代码 通过 Map 数据 类 型 的 set() 方 法 对 对 象 map 进行 初始 化 操作 ， 一 共存 储 了 三 


组 键 值 对 。 
第 06 行 代码 通过 Map 数据 类 型 的 size 属性 获取 集合 的 长 度 。 


第 07 一 09 行 代码 是 在 for 循环 语句 中 使 用 Map 数据 类 型 的 getO 方 法 , 通过 对 象 map 的 键 获取 


对 应 的 值 。 


运行 页 面 ， 控 制 台 输出 的 调试 信息 如 图 13.9 所 示 。 从 浏览 器 控制 台 的 输出 结果 来 看 ，Map 对 


象 是 通过 键 来 调用 值 的 。 





Developer Tools - ECMAScript in 15-days - http://localhost:63342/W: 


[a Inspectc Consol Debugge Style Edit. Performanc Memor Networ Storag 加 -> 园 日 这 口 人 加 


人 首 时 Filter output Persist Logs 
map's size : 3 chl3-es-obj-map-basic.html:27:9 
map(1, a) chl3-es-obj-map-basic.html :29:13 
map(2, b) chl3-es-obj-map-basic.html :29;13 
map(3, c) chl3-es-obj-map-basic.html :29:13 


13.9 ”定义 Map 数据 类 型 


13.4.2 ”判断 Map 集合 中 的 值 


ECMAScript 语法 规范 中 同样 为 Map 数据 类 型 提供 了 一 个 has0 方 法 ， 用 来 判断 一 个 键 值 对 是 


否 包含 在 Map 集合 中 。 


下 面 是 判断 一 个 键 值 对 是 否 包含 在 Map 集合 中 的 代码 示例 ( 详 见 源 代 码 ch13 目录 中 的 ch13-es- 


obj-map-has.html 文件 ) 。 
【代码 13-10】 


01 <script type="text/javascript"> 


02 Var map = new Map(); 

03 map。 Set (lr “ann)s 

04 map: set (2. non) 

05 maps SeE (SP "OT: 

06 console.log("map's size : " + map.size); 

Or for (let 1 = 1;»; 1 <= map.size; 1++) { 

08 if (map.has (i)) 

09 Sonsole eloog( map(t TT ISDN 
10 } 


LVSCYTOE> 


关于 【代码 13-10】 的 分 析 如 下 : 


第 08 行 代码 在 让 语句 中 通过 使 用 Map 数据 类 型 的 has0 方 法 判断 for 循环 的 目 变 量 i 的 取 值 作 
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为 键 是 耕 包 含 在 Map 对 象 中 。 
运行 页 面 ， 控 制 台 输出 的 调试 信息 如 图 13.10 所 示 。 从 浏览 器 控制 台 的 输出 结果 来 看 ， 通 过 
Map 数据 类 型 的 has0 方 法 成 功 判 断 出 键 值 对 是 否 包 含 在 集合 中 。 





Developer Tools - ECMAScript dA 


[Ca Inspect Conso Debugg Style Edit Performar Memor Netwo Storac 加 -> 园 日 率 口 可 


人 闸 时 Filter output Persist Logs 
map's size : 3 chl3-es-obj-map-has.html:27:9 
map(l1, a) chl3-es-obj-map-has.html :30:17 
map(2, b) chl3-es-obj-map-has.html :30:17 
map(3, c) chl3-es-obj-map-has.html :30:17 

>| 


13.10 ”判断 键 值 对 是 否 包 含 在 Map 集合 中 


13.4.3 ”删除 和 清空 Map 集合 


ECMAScript 语法 规范 中 还 为 Map 数据 类 型 提供 了 删除 delete() 方 法 和 清空 clear(0 方 法 ， 分 别 
用 来 删除 Map 集合 中 的 某 个 键 值 对 和 清空 Map 集合 中 的 全 部 键 值 对 。 
下 面 是 一 个 删除 和 清空 Map 集合 中 键 值 对 的 代码 示例 ( 详 见 源 代码 ch13 目录 中 的 ch13-es-obj- 
map-del-clear.html 文件 ) 。 
【代码 13-11 】 


01 
02 
O03 
04 
05 
06 
07 
08 
09 
10 
hal 
bs 
13 
14 
1 
16 
LT 


<script type="text/javascript"> 


var map = new Map(); 
mapSet (lr Van 
mape se (27 SD }s 
mapssgeet3 ore 
console.log("map's size : " + map.size); 
for (let 1 = 1; i <= 3; i++) { 

consoleslog("map( TT En ESDR cect rn) 
} 
console.log("delete map(2, 'b') : " + map.delete (2)); 
console.log ("map's size : " + map.size); 
For | 

if (map.has(i)) 

console.log(™map("+1i+" "+ map.gqet(iy + ")"™);» 

} 
console.log("clear map : " + map.clear ()); 
console.log("map's size : " + map.size); 
for (let Tr =m 1 1 c= 3 TFET 

if (map.has (i)) 

console.log("map("+i+", n+ map.get(i) + ")"); 

} 


</acript> 


关于 【代码 13-11】 的 分 析 如 下 : 

第 10 行 代 码 通过 Map 数据 类 型 的 delete() 方 法 删除 了 Map 对 象 中 的 第 二 组 键 值 对 数据 。 

第 16 行 代码 通过 Map 数据 类 型 的 clear() 方 法 ， 在 执行 第 10 行 代码 删除 数据 之 后 ， 再 次 清空 
Map 对 象 中 全 部 剩余 的 数据 。 
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运行 页 面 ， 控 制 台 输出 的 调试 信息 如 图 13.11 所 示 。 从 浏览 器 控制 台 的 输出 结果 来 看 ， 通 过 
Map 数据 类 型 的 delete() 方 法 和 clear0 方 法 成 功 删 除 和 清空 集合 中 的 键 值 对 。 





Developer Tools - ECMAScript in 15-days - http://localhost:63342/WebstormP!' 
GR Inspector Console Debugger Style Editor Performance Memory Network Storage 办 ~" 团 目 窗口 了 可 


首富 Filter output Persist Logs 
map's Size : 3 chl3-es-obj-map-del-clear.html:27:9 
map(l1, a) chl3-es-obj-map-del-clear.html:29:13 
| map(2, b) chl3-es-obj-map-del-clear.html :29:13 
map(3, c) chl3-es-obj-map-del-clear.html:29:13 
delete map(2, 'b') ; true chl3-es-obj-map-del-clear.html:31:9 
map's size : 2 chl3-es-obj-map-del-clear.html :32:9 
map(1, a) chl3-es-obj-map-del-clear.html:35:17 
map(3, c¢) chl3-es-obj-map-del-clear,.html:35:17 
clear map : Undefined chl3-es-obj -map-del-clear,.html:37:9 
map's size : 0 chl3-es-obj-map-del-clear.html:38:9 

> 


13.11 删除 和 清空 Map 集合 中 的 键 值 对 
vw 
13.5 本 董 小 结 


本 章 主要 介绍 了 ECMAScript 6 语法 规范 中 关于 对 象 新 特性 的 知识 ， 包 括 ECMAScript 对 象 属 
性 简洁 表示 法 、Set 对 象 与 Map 对 象 的 基本 概念 和 使 用 方法 ， 并 通过 一 些 具 体 实例 进行 了 讲解 。 
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本 草 将 介绍 ECMAScript 正则 表达 式 相 关 的 内 容 。 在 ECMAScript 语法 规范 中 , 正则 表达 式 是 通过 
一 个 RegExp 对 象 来 定义 的 ， 也 就 是 说 ECMAScript 语法 规范 将 正则 表达 式 按照 对 象 模式 进行 设计 。 


14.1 ”正则 表达 式 基 础 


14.1.1 什么 是 正则 表达 式 


正则 表达 式 (Regular Expression) 主要 用 来 查询 、 检 索 或 蔡 换 所 有 符合 某 个 模式 (规则 〉 的 文 
本 。 因此 , 正则 表达 式 其 实 就 是 一 种 文本 模式 , 用 于 描述 在 搜索 文本 时 要 匹配 的 一 个 或 多 个 字符 串 。 

一 般 来 说 ， 正 则 表达 式 是 由 普通 字符 (a~z、A~Z 等 ) 、 数 字 (0 一 9) 及 一 些 特 殊 字 符 〈"" 
"A gr" "i" 和 每) 组 合 而 成 的 一 种 逻辑 公式 ， 其 表示 具有 一 定 规则 的 字符 串 ， 并 通过 规则 来 
达到 过 滤 文 本 的 目的 。 

在 计算 机 编程 领域 ， 正 则 表达 式 已 被 绝 大 多 数 高 级 程序 设计 语言 (如 C、Java、PHP、Perl 和 
JavaScript 等 ) 所 采纳 。 由 于 正则 表达 式 在 程序 设计 中 的 重要 性 ， 因 此 很 多 高 级 程序 设计 语言 专门 
为 正则 表达 式 功 能 实现 了 开发 库 ,将 每 项 具体 功能 整合 在 一 起 , 极 大 地 方便 了 程序 员 的 测试 和 调用 。 


14.1.2” ”RegExp 对 象 语法 


在 ECMAScript 语法 规 泡 中 ， 为 RegExp 对 象 的 使 用 定义 了 具体 规则 。 如 果 打 算 使 用 正则 表达 
式 ， 那 首先 要 定义 一 个 RegExp 对 象 。 


1. 通过 new 运算 符 定 义 RegExp 对 象 


Var regExp = new RegExp(pattern, attributes) : 
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其 中 ， 变 量 regExp 保存 了 RegExp0 构 造 方法 的 返回 值 ， 表 示 一 个 RegExp 对 象 。 人 参数 pattern 
表示 模式 (正则 表达 式 模式 或 具体 正则 表达 式 ) ， 即 当 使 用 该 RegExp 对 象 在 一 个 字符 串 中 检索 时 ， 
需要 匹配 的 就 是 参数 pattern。 参 数 attributes 表示 一 个 可 选 的 属性 值 ;:"g" "i" 和 "m"， 这 3 个 属性 值 
分 别 表 示 指 定 全 局 匹配 、 区 分 大 小 写 的 匹配 和 多 行 匹配 。 另 外 ， 参 数 attributes 是 ECMAScript 标准 
化 之 后 的 产物 ， 标准化 之 前 是 不 文 持 "m" 属 性 的 。 夺 参数 pattern 是 正则 表达 式 ， 而 不 是 字符 串 ， 则 
必须 省 略 该 参数 attributes 。 

2. 不 通过 new 运算 符 定 义 RegExp 对 象 

Var regExp = RegExp (pattern, attributes); 

如 果 不 使 用 new 运算 从 ， 而 是 将 RegExp(O 作 为 图 数 调用 ， 那 么 该 方式 与 使 用 new 运算 从 定义 
RegExp 对 象 的 方式 是 一 样 的 。 需 要 注意 的 是 ， 当 参数 pattern 是 正则 表达 式 时 ， 了 函数 只 返回 模式 
pattern， 而 不 会 创建 一 个 新 的 RegExp 对 象 。 

3. 直接 量 

ECMAScript 规范 还 文 持 使 用 直接 量 来 定义 模式 字符 串 ， 有 具体 格式 如 下 : 

/pattern/attributes 

其 中 ， 参 数 pattern 和 attributes 的 含义 与 使 用 RegExp 对 象 定 义 模式 字符 串 时 的 参数 含义 是 一 
样 的 。 

4. 异常 处 理 

如 果 参 数 pattern 是 不 合法 的 正则 表达 式 , 或 者 参数 attributes 不 是 "g" "i" 和 "m" 这 3 个 合法 字符 ， 
就 会 抛 出 异常 ， 如 果 参 数 pattern 是 合法 的 RegExp 对 象 ， 却 没有 省 上 略 参 数 attributes， 那 也 会 抛 出 异 
和 常 。 因 此 ， 设 计 人 员 在 使 用 正则 表达 式 时 需要 注意 这 两 点 ， 避 人 免 出 现 错误 。 


14.1.3” ”RegExp 对 象 模式 
ECMAScript 语法 规范 为 RegExp 对 象 的 使 用 定义 了 具体 规则 方法 ， 包 括 RegExp 对 象 的 属性 
和 方法 、 方 括号 、 元 字符 、 量 词 、 修 饰 符 等 。 下 面 就 介绍 RegExp 对 象 的 规则 方法 。 
1. RegExp 对 象 方 法 
ECMAScript 语法 规范 为 RegExp 对 象 一 共 定 义 了 3 个 主要 方法 ， 有 具体 见 表 14.1。 
表 14.1 RegExp 对 象 方法 


方法 名 称 
test | 检索 字符 串 中 指定 的 值 


_exec ”| 检索 字符 串 中 指定 的 值 ”| 返回 检索 到 的 值 及 其 位 置 
compile 。 | 编译 正则 表达 式 | regExpcompile (pattem) 


2. RegExp 对 象 修饰 符 标记 
ECMAScript 语法 规范 为 RegExp 对 象 定 义 了 3 个 修饰 符 标 记 , 用 于 匹配 检索 模式 , 具体 见 表 14.2。 
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表 14.2 RegExp 对 象 修饰 符 标记 


修饰 符 标记 名 称 


执行 全 局 匹配 〈 查 找 所 有 匹配 而 非 在 找到 第 一 个 匹配 后 停止 ) 
i | 执行 对 大 小 写 不 敏感 的 匹配 


执行 多 行 匹配 





3. RegExp 对 象 属 性 
ECMAScript 语法 规范 为 RegExp 对 象 定义 了 一 组 属性 ， 具 体 见 表 14.3。 
表 14.3” RegExp 对 象 属性 


_multiline | 检查 RegExp 对 象 是 否 具有 修饰 符 标记 “m” | 
souce | TE 表达 的 尖 X 本 


4. 方 括号 
在 ECMAScript 规范 的 RegExp 对 象 中 ， 方 插 号 “[]” 用 于 查找 某 个 范围 内 的 字符 ， 具 体 见 表 
14.4。 





表 14.4 RegExp 对 象 方 括号 表达 式 
[09] | 厅 E 人 人 0eN 宁 
Ba 。 | 查找 任何 从 小 写 a 到 小 号 z 的 了 符 
[A 


5. 元 字符 
在 ECMAScript 规范 的 RegExp 对 象 中 , 元 字符 用 于 查找 具有 特殊 含义 的 字符 , 具体 见 表 14.5。 
表 14.5 RegExp 对 象 元 字符 


与 十 心 ) 





查找 数字 
 \D | 查找 非 数字 字符 (与 相对 应 
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t 


B 

S23 Ns 
\xdd 

wox 


\UXXXX 





6. 量词 
在 ECMAScript 规范 的 RegExp 对 象 中 ， 量 词 用 于 得 找 具 有 重复 定义 的 字符 ， 有 具体 见 表 14.6。 
表 14.6 ”RegExp 对 象 量 词 


* | 重复 零 次 或 更 多 次 


5。 | 罗 也 字符 串 的 结束 





7. 分 组 

在 ECMAScript 规范 的 RegExp 对 象 中 ， 分 组 通过 小 括号 “(...)” 来 定义 ， 可 以 实现 对 一 组 多 
个 字符 重复 次 数 的 查找 。 

8. 分 枝 


在 ECMAScript 规范 的 RegExp 对 象 中 ,分 枝 通 过 符号 “|” 来 定义 。 具 体 来 说 ,分 校 就 是 在 同 
时 存在 几 种 规则 的 情况 下 , 只 要 能 满足 其 中 任意 一 种 规则 就 表示 匹配 成 功 , 从 逻辑 上 讲 分 枝 与 “或 ” 
的 关系 是 一 致 的 。 
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14.2 ”RegExp 对 象 方法 


本 节 将 介绍 如 何 使 用 正则 表达 式 RegExp 对 象 的 方法 ， 具 体 包 括 test(0) 方 法 、exec(0) 方 法 和 
compile( 方法 。 


14.2.1 test 方法 


test(0 方 法 用 于 检测 一 个 字符 串 是 否 匹 配 某 个 模式 ， 该 方法 会 根据 检索 结果 返回 一 个 布尔 值 。 
下 面 是 一 个 使 用 test0 方 法 的 简单 代码 示例 〈 详 见 源 代 码 ch14 目录 中 的 ch14-es-regexp-test.html 文 
件 ) 。 

【代码 14-1 】 


01 <script type="text/javascript"> 


02 var StrTxt = Hello ECMAScript!", 

03 console.log("Searched Txt : Hello ECMAScript!"); 

04 Var regExp01 = new RegExp ("ECMAScript"); 

05 Var result0]1 = regExp0l1 .test (strTxt); 

06 console. oo test "ECMAOCYIBE return: "Ft YesuLt0l): 
(0 Var regExp02 = new RegExp ("ECMAScript");} 

08 Var result02 = regExp02.test (strTxt); 

09 econaole Iog (test "ECMASCGPTIPDE roOEUPN "TH VesULt02); 
10 Var regExp03 = new RegExp(" ") ; 

La Var result03 = regExp03.test (strTxt); 

1 console.log("test blank return : " + result03); 


Tm acreipt> 


关于 【代码 14-1】 的 分 析 如 下 : 

第 02 行 代码 定义 了 一 个 字符 串 变 量 strTxt， 并 初始 化 为 "Hello ECMAScript!"， 用 作 被 检索 的 
字符 串 。 

第 04 行 代码 通过 new 关键 字 创 建 了 RegExp 对 象 的 第 一 个 实例 regExp01， 模 式 参 数 定义 为 字 
侍 串 "ECMAScript"。 

第 05 行 代码 通过 使 用 test() 方 法 , 判断 第 04 行 代码 定义 的 模式 字符 串 "ECMAScript"， 能 否 在 
第 02 行 代码 定义 的 字符 串 变 量 strTxt 中 检索 出 来 ， 检 索 结 果 的 返回 值 保存 在 变量 result01 中 。 

第 07 行 代码 通过 new 关键 字 创 建 了 RegExp 对 象 的 第 二 个 实例 regExp02， 模式 参数 定义 为 字 
符 串 "ECMAScript"。 注 意 ， 这 里 将 大 写字 母 换 成 了 小 写字 母 。 

第 08 行 代码 通过 使 用 test() 方 法 , 判断 第 07 行 代码 定义 的 模式 字符 串 "ECMAScript"， 能 否 在 
第 02 行 代码 定义 的 字符 串 变 量 strTxt 中 检索 出 来 ， 结 果 人 返回 值 保 存在 变量 result02 中 。 

第 10 行 代码 通过 new 关键 字 创 建 了 RegExp 对 象 的 第 三 个 实例 regExp03， 模 式 参 数 定义 为 裕 
格 ("") 字符 串 。 

第 11 行 代码 通过 使 用 test( 方 法 ， 判 断 第 10 行 代码 定义 的 模式 字符 串 〈 空 格 ) ， 能 否 在 第 02 
行 代 码 定义 的 字符 串 变 量 strTxt 中 检索 出 来 ， 检 索 结果 的 返回 值 保 存在 变量 result03 中 。 
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运行 页 面 ， 控 制 台 输出 的 调试 信息 如 图 14.1 所 示 。 


Developer Tools - ECMAScript in 15-days - http://localhost:633 





[a Inspect Conso Debugo Style Edil Performal Memo Netwo Storac 回 -* 园 日 半日 口 


闸 时 Filteroutput _| Persist Logs 

| Searched Txt : Hello ECMAScript! chl4-es-regexp-test.html:24:3 
test “ECMAScript ”return : true chl4-es-regexp-test.html:27:3 
test 'ECMAScript' return : false chl4-es-regexp-test.html :30:3 
test blank return : true chl4-es-regexp-test.html :33:3 

> 


Denemenen eensnennneneen nn 


14.1 RegExp 对 象 test0 方 法 


如 图 14.1 所 示 , 从 第 06 行 代码 输出 的 结果 来 看 ,第 04 行 代码 定义 的 模式 字符 串 "ECMAScript" 
被 成 功 检 索 到 了 ， 返 回 结果 为 true。 

从 第 09 行 代 码 输出 的 结果 来 看 ,第 07 行 代码 定义 的 模式 字符 串 "ECMAScript" 没 有 被 检索 到 ， 
返回 结果 为 false。 这 说 明 使 用 RegExp 对 象 的 test() 方 法 检索 时 ， 字 母 默认 是 区 分 大 小 写 的 。 

从 第 12 行 代码 输出 的 结果 来 看 ， 第 10 行 代 码 定 义 的 模式 字符 串 空 格 同样 被 成 功 检索 到 了 ， 
返回 结果 为 true。 这 说 明 RegExp 对 象 是 将 空格 当 作 字符 串 来 处 理 的 ， 这 样 设计 无 疑 是 合理 的 ， 因 
为 像 空 格 这 样 的 特殊 字符 在 文本 中 是 经 常用 到 的 。 


14.2.2” exec 方法 


与 test() 方 法 类 似 ，exec(0) 方 法 同样 用 于 检测 一 个 字符 串 是 否 匹 配 某 个 模式 。 二 者 的 主要 区 别 是 
返回 值 不 同 ，test0 方 法 的 返回 值 为 布尔 值 ， 而 exec0 方 法 的 返回 值 为 检索 到 的 内 容 。 

下 面 是 一 个 使 用 exec0 方 法 的 代码 示例 ( 详 见 源 代码 ch14 目录 中 的 ch14-es-regexp-exec.html 
文件 ) ， 这 段 代 码 是 在 【代码 14-1】 基 础 上 修改 而 成 的 。 

【代码 14-2】 


01 <script type="text/javascript"> 


02 Var strTxt = "Hello ECMAScript!"; 

03 console.log("Searched Txt : Hello ECMAScript!");} 

04 Var regExp01 = new RegExp ("ECMAScript");} 

Us Var result0]1 = regExp0]1 .exec (strTxt); 

06 console.log ("exec 'ECMAScript"' return : " + result01); 
07 Var regExp02 = new RegExp ("ECMAScript");} 

08 Var result02 = regExp02 .exec (strTxt); 

09 console.log ("exec 'ECMAScript' return : " + result02); 
10 Var regExp03 = new RegExp ("e"); 

Il Var result03 = regExp03.exec (strTxt); 

1 console.log ("exec 'e' return : " + result03); 


3s Tel sul she 

关于 【代码 14-2】 的 分 析 如 下 : 

第 02 行 代码 定义 了 一 个 字符 串 变 量 strTxt， 并 初始 化 为 "Hello ECMAScript!"， 用 作 被 检索 的 
字符 串 。 

第 04 行 代码 通过 new 关键 字 创 建 了 RegExp 对 象 的 第 一 个 实例 regExp01， 模 式 参 数 定义 为 字 
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从 串 "ECMAScript"。 

第 05 行 代码 通过 使 用 exec() 方 法 ， 检 索 第 04 行 代 码 定义 的 模式 字符 串 "ECMAScript"， 是 否 
包括 在 第 02 行 代码 定义 的 字符 串 变 量 strTxt 中 ， 并 将 检索 结果 的 返回 值 保 存在 变量 result01 中 。 

第 07 行 代码 通过 new 关键 字 创 建 了 RegExp 对 象 的 第 二 个 实例 regExp02， 模 式 参数 定义 为 字 
符 串 “ECMAScript”。 注 意 ， 这 里 将 大 写字 母 换 成 了 小 写字 母 。 

第 08 行 代码 通过 使 用 exec() 方 法 ， 检 索 第 07 行 代 码 定义 的 模式 字符 串 "ECMAScript"， 是 否 
包括 在 第 02 行 代码 定义 的 字符 串 变 量 strTxt 中 ， 并 将 检索 结果 的 返回 值 保存 在 变量 result02 中 。 

第 10 行 代码 通过 new 关键 字 创 建 了 RegExp 对 象 的 第 三 个 实例 regExp03， 模 式 参 数 定义 为 字 
母 "e 的 字符 串 。 

第 11 行 代码 通过 使 用 exec() 方 法 , 检索 第 10 行 代 码 定义 的 模式 字符 串 "e"， 是 否 包括 在 第 02 
行 代 码 定义 的 字符 串 变 量 strTxt 中 ， 并 将 检索 结果 的 返回 值 保存 在 变量 result03 中 。 

运行 页 面 ， 控 制 台 输出 的 调试 信息 如 图 14.2 所 示 。 





Developer Tools - ECMAScript in 15-days - http://localhost:633 
Ca Inspect Conso Debugc Style Edi Performal Memo Netwo Storac 回 - 园 日 宗 日 口 


曾 时 Filter output |_ | Persist Logs 
Searched Txt : Hello ECMAScript! chl4-es-regexp-exec.html :24:3 
exec 'ECMAScript' return : ECMAScript chl4-es-regexp-exec.html :27:3 

| exec “ecmascript” retuyrn ; null chl4-es-regexp-exec.html :30:3 
exec. 本” return :ee chl4-es-regexp-exec.html :33:3 

>| 


14.2 ”RegExp 对 象 exec() 方 法 


如 图 4.2 所 示 , 从 第 06 行 代码 输出 的 结果 来 看 ,第 04 行 代码 定义 的 模式 字符 串 "ECMAScript" 
被 成 功 检 索 到 了 ， 返 回 值 为 "ECMAScript"。 

从 第 09 行 代 码 输出 的 结果 来 看 ， 第 07 行 代码 定义 的 模式 字符 串 "ECMAScript" 没有 被 检索 
到 ， 返 回 值 为 宇 对 象 null。 这 说 明 RegExp 对 象 的 exec0 方 法 与 test0) 方 法 一 样 ， 在 检索 字母 时 默认 
是 区 分 大 小 与 的 。 

从 第 12 行 代码 输出 的 结果 来 看 ， 第 10 行 代码 定义 的 模式 字符 串 "e" 被 成 功 检 索 到 了 ， 返 回 
值 为 字符 串 "e"， 再 次 印证 了 exec0 方 法 是 区 分 字母 大 小 写 的 。 


14.2.3 compile 方法 


compile() 方 法 用 于 在 脚本 执行 过 程 中 编译 正则 表达 式 ， 也 可 以 用 于 改变 和 重新 编译 正则 表达 式 。 
这 个 方法 可 能 不 如 前 两 个 方法 常用 ， 但 也 是 一 个 非常 重要 的 RegExp 对 象 方法 。 
下 面 是 一 个 使 用 compile() 方 法 的 代码 示例 ( 详 见 源 代 码 ch14 目录 中 的 ch14-es-regexp-compile. 
html 文件 ) 。 
【代码 14-3 】 


01 <script type="text/javascript"> 


02 var strixt = “Hello ECMASceript!l", 
中 民 1 console.log("Searched Txt : Hello ECMAScript!"); 
04 Var regExp01 = new RegExp ("ECMAScript");} 
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05 Var result01 = regExp01 .test (strTxt); 

06 console.。. log ("test "ECMASCript return "| vesult0l)s 

07 regExp01 .compile ("ECMAScript"); 

08 console.log ("compile ‘'ECMAScript"' changes to ‘ECMAScript"'.");} 
09 Var result02 = regExp0l1 .test (strTxt); 

10 console.log("test "ECMAScript"' return : "+ result02); 


ript> 


关于 【代码 14-3】 的 分 析 如 下 : 

第 02 行 代 码 定义 了 一 个 字符 串 变 量 strTxt， 并 初始 化 为 "Hello ECMAScript!"， 用 作 被 检索 的 
字符 串 。 

第 04 行 代码 通过 new 关键 字 创 建 了 RegExp 对 象 的 第 一 个 实例 regExp01， 模 式 参数 定义 为 字 
符 串 "ECMAScript"。 

第 05 行 代 码 通过 使 用 test() 方 法 , 判断 第 04 行 代码 定义 的 模式 字符 串 "ECMAScript"， 是 否 包 
括 在 第 02 行 代码 定义 的 字符 串 变 量 strTxt 中 ， 并 将 检索 结果 的 返回 值 保 存在 变量 result01 中 。 

第 07 行 代 码 对 变量 regExp01 使 用 compile() 方 法 ,通过 将 参数 定义 为 字符 串 "ECMAScript" 重 
新 定义 了 模式 字符 串 ， 即 将 大 写字 母 换 成 小 写字 母 。 

第 09 行 代码 再 次 通过 使 用 test0 方 法 ， 检 索 第 07 行 代码 中 重新 定义 的 模式 字符 串 
"ECMAScript"， 是 否 包括 在 第 02 行 代码 定义 的 字符 串 变 量 strTxt 中 ， 并 将 检索 结果 的 返回 值 保 存 
在 变量 result02 中 。 

运行 页 面 ， 控 制 台 输出 的 调试 信息 如 图 14.3 所 示 。 


Developer Tools - ECMAScript in 15-days - http://localhost:63342 /Wt 





[a Inspectc Consol Debugge Style Edit' Performanc Memor Networ Storag 团 " 轩 上 目 内 口 可 


从 是 Filter output _ | Persist Logs 
Searched Txt : Hello ECMAScript! chl4-es-regexp-compile.html:24:3 
test “ECMAScript ”return : true chl4-es-regexp-compile.html:27:3 
compile “ECMAScript ”changes to “ecmascript ' . chl4-es-regexp-compile.html:29:3 
test “ecmascript ”return : false chl4-es-regexp-compile.html:31:3 

| 


ee 


14.3 ”RegExp 对 象 compile 方法 


如 图 14.3 所 示 , 从 第 06 行 代码 输出 的 结果 来 看 ,第 04 行 代码 定义 的 模式 字符 串 "ECMAScript" 
被 成 功 检索 到 了 ， 返 回 结果 为 true。 

从 第 09 行 代 码 输出 的 结果 来 看 ， 第 07 行 代码 重新 定义 的 模式 字符 串 "ECMAScript" 没有 被 
检索 到 ， 返 回 结果 为 false。 这 说 明 第 07 行 代码 中 重新 定义 的 模式 字符 串 被 compile() 方 法 编译 成 功 
了 了， 导致 第 09 行 代码 中 再 次 使 用 testO 方 法 检索 时 没有 搜 到 字符 串 "ECMAScript"。 


14.3 ”RegExp 对 象 修饰 符 标 记 


本 节 将 介绍 如 何 使 用 正则 表达 式 RegExp 对 象 的 修饰 符 标 记 ， 主 要 包括 g 和 i 两 个 修饰 符 标记 。 
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14.3.1 “g” 修 饰 符 标 记 


“g” 修 饰 符 标记 用 于 定义 正则 表达 式 对 象 是 否 执 行 全 局 检索 。 
下 面 是 一 个 使 用 “g” 修 饰 符 标 记 的 简单 代码 示例 ( 详 见 源 代码 chl4 目录 中 的 
ch14-js-regexp-g.html 文件 ) 。 
【代码 14-4】 


01 <script type="text/javascript"> 


02 Var StrTxt = "ECMAScript ECMAScript ECMAScript"; 

中 民 1 console.log("Searched Txt : ECMAScript ECMAScript ECMAScript"); 

04 var regExp = /ECMA/; 

Qs For (vores = 0 <3 TIPE 

06 Var result = regExp.exec (strTxt); 

07 console.log("exec /ECMA/ return : " + result + " at "+ regExp.lastIndex); 
08 } 

09 Var regExp 9g = /ECMA/g; 

10 for (nor = 0 yl 

1 Var result g = regExp g.exec(strTxt); 

2 console.log("exec /ECMA/g return : " + result g +" at " + regExp g.lastIindex); 
bs } 


TA /erie> 


关于 【代码 14-4】 的 分 析 如 下 : 

第 02 行 代 码 定 义 了 一 个 字符 串 变 量 strTxt， 并 初始 化 为 "ECMAScript ECMAScript 
ECMAScript"， 用 作 被 检索 的 字符 串 。 

第 04 行 代码 通过 直接 量 方式 定义 了 RegExp 对 象 的 第 一 个 实例 regExp， 模 式 参 数 定义 为 字符 
串 “/ECMA/”。 

第 05 一 08 行 代 码 通过 一 个 for 循环 语句 ， 使 用 exec() 方 法 检索 第 04 行 代 人 码 定义 的 模式 字符 串 

“/ECMA/” 是 否 包 括 在 第 02 行 代码 定义 的 字符 串 变 量 strTxt 中 ， 并 将 检索 结果 的 返回 值 保存 在 变 
量 result 中 。 其 中 ， 第 07 行 代 码 使 用 RegExp 对 象 的 lastIndex 属性 获取 了 下 一 次 检索 位 置 的 整数 
值 ， 该 属性 会 在 后 面 详细 介绍 。 

第 09 行 代 码 再 次 通过 直接 量 方式 定义 了 RegExp 对 象 的 第 二 个 实例 regExp_g， 模 式 参 数 定义 
为 字符 串 “/ECMA/g”。 注 意 ， 这 里 添加 了 “g” 修 饰 符 标记 。 

第 10 一 13 行 代码 再 次 通过 一 个 for 循环 语句 ， 使 用 exec() 方 法 检索 第 09 行 代码 定义 的 模式 字 
符 串 “/ECMA/g” 是 否 包 括 在 第 02 行 代码 定义 的 字符 串 变 量 strTxt 中 ， 并 将 检索 结果 的 返回 值 保 
存在 变量 result g 中 。 其 中 ， 第 12 行 代码 再 次 使 用 RegExp 对 象 的 "lastIndex” 属 性 获取 了 下 一 次 
检索 位 置 的 整数 值 。 

运行 页 面 ， 控 制 台 输出 的 调试 信息 如 图 14.4 所 示 。 

如 图 14.4 所 示 ， 从 第 07 行 代码 输出 的 结果 来 看 ， 第 04 行 代 码 定义 的 模式 字符 串 “/ECMA/” 
被 成 功 检索 到 了 ， 返 回 值 为 “ECMA”， 位 置 为 0。 如 图 14.4 中 第 头 所 指 (重复 3 次 ) ， 第 07 行 
代码 输出 的 结果 重复 了 完全 相同 的 3 次 ， 说 明 每 次 执行 完 第 06 行 代码 的 exec() 方 法 后 ， 下 一 次 检 
索 的 位 置 又 重新 回归 到 初始 位 置 0。 
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中 Inspecto Consolt Debugge Style Editc Performanc Memor Networ| Storage 回 - 园 日 闷 日 加 


兽 时 Filter output (| Persist Logs 
Searched Txt : ECMAScript ECMAScript ECMAScript chl4-es-regexp-g.html:24:9 
exec /ECMA/ return : ECMA at 9 3 chl4-es-regexp-g.html :28:13 
exec /ECMA/g return : ECMA at 4 号 chl4-es-regexp-g.html:33:13 
exec /ECMA/g return : ECMA at 15 本、 chl4-es-regexp-g.html :33:13 


exec /ECMA/g return : ECMA at 26 ~ chl4-es-regexp-g.html :33:13 





14.4 RegExp 对 象 “g” 修 饰 符 标记 


从 第 12 行 代码 输出 的 结果 来 看 ， 第 09 行 代码 定义 的 模式 字符 串 “/ECMA/g” 被 成 功 检 索 到 
了 ,返回 值 为 “ECMA”, 且 3 次 调用 返回 的 位 置 值 均 不 同 (如 图 14.4 中 箭头 所 指 : 4、15 和 26) ， 
说 明 每 次 执行 完 第 11 行 代 码 的 exec() 方 法 后 ， 下 一 次 检索 的 位 置 是 按照 顺序 计算 的 。 由 此 可 见 ， 
第 09 行 代码 定义 的 “g” 修 饰 符 标 记 起 到 了 作用 。 


14.3.2 “i” 修 饰 符 标 记 


“i” 修 饰 符 标 记 用 于 定义 正则 表达 式 对 象 执行 大 小 写 不 敏感 的 检索 。 

下 面 是 一 个 使 用 “i” 修 饰 符 标记 的 简单 代码 示例 ( 详 见 源 代码 ch14 目录 中 的 ch14-es-regexp- 
i.html 文件 ) 。 

【代码 14-5】 


01 <script type="text/javascript"> 


02 Var strTxt = "Hello ECMAScript!"; 

| console.log ("Searched Txt : Hello ECMAScript!"); 
04 var regExp = /E/; 

05 Var result = regExp.exec(strTxt); 

06 console.log ("exec /E/ return : " + result); 

07 var regExp i = /E/i; 

08 Var result i = regExp i.exec(strTxt); 

09 console.log ("exec /E/i return : " + result i); 


TO /gCreliot> 


关于 【代码 14-5】 的 分 析 如 下 : 

第 02 行 代码 定义 了 一 个 字符 串 变 量 strTxt， 并 初始 化 为 "Hello ECMAScript!"， 用 作 被 检索 的 
字符 串 。 

第 04 行 代 码 通过 直接 量 方式 定义 了 RegExp 对 象 的 第 一 个 实例 regExp， 模 式 参数 定义 为 字符 
串 “/E/”。 注 意 ， 这 里 定义 的 模式 字符 串 是 默认 区 分 大 小 写 的 。 

第 05 行 代码 通过 使 用 exec() 方 法 检索 第 04 行 代码 定义 的 模式 字符 串 “/E/” 是 否 包 括 在 第 02 
行 代码 定义 的 字符 串 变 量 strTxt 中 ， 并 将 检索 结果 的 返回 值 保存 在 变量 result 中 。 

第 07 行 代码 通过 直接 量 方式 定义 了 RegExp 对 象 的 第 二 个 实例 regExp_i， 模 式 参 数 定义 为 字 
符 串 “/E/i”。 注 意 ， 这 里 定义 的 模式 字符 串通 过 使 用 “i” 修 饰 符 标 记 ， 表 示 对 大 小 写 是 不 敏感 的 。 

第 08 行 代码 通过 使 用 exec() 方 法 检索 第 07 行 代码 定义 的 模式 字符 串 “/EHi” 是 否 包 括 在 第 02 
行 代码 定义 的 字符 串 变 量 strTxt 中 ， 并 将 检索 结果 的 返回 值 保存 在 变量 result i 中 。 


下 
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运行 页 面 ， 控 制 台 输出 的 调试 信息 如 图 14.5 所 示 。 





Develtoper Tools - ECMAScript in 15-days - http://ocathc 
Ca Inspec Cons Debwg Style Ec Perform Mem Netw' Stora 回 - 园 日 宗 日 加 口 


兽 时 Filter output | Persist Logs 
Searched Txt : Hello ECMAScCript! chl4-es-regexp-i.html:24:9 
exec /E/ return : E chl4-es-regexp-i.html:27:9 
exec /E/i return : e chl4-es-regexp-i.html :30:9 

2|. 


14.5 RegExp 对 和 象 汪 修饰 符 标 记 


如 图 14.5 所 示 ， 从 第 06 行 代码 输出 的 结果 来 看 ， 第 04 行 代 码 定义 的 模式 字符 串 “/E/” 被 成 
功 检索 到 了 ， 返 回 值 为 “E”。 

从 第 09 行 代码 输出 的 结果 来 看 ， 第 07 行 代码 定义 的 模式 字符 串 “/E/i” 被 成 功 检索 到 了 ， 返 
回 值 为 “e”。 注意 ， 检 索 到 的 返回 值 是 小 写字 母 “e”， 说 明 第 09 行 代 码 定义 的 “i” 修 饰 符 标 记 
起 到 了 作用 。 


14.3.3 “g” 和 “i” 修 饰 符 标记 组 合 


“g” 和 “i” 这 两 个 修饰 符 标 记 可 以 组 合 在 一 起 使 用 ， 用 于 定义 正则 表达 式 对 象 执行 全 局 且 大 
小 写 不 敏感 的 检索 。 

下 面 是 一 个 使 用 “g” 和 “i” 组 合 修饰 符 标记 的 简单 代码 示例 〔( 详 见 源 代码 ch14 目录 中 的 
ch014-es-regexp-gi.html 文件 ) 。 

【代码 14-6】 


01 <script type="text/javascript"> 


02 Var strTxt = "ECMAScript ECMAScript ECMAScript"; 

03 console.log("Searched Txt : ECMAScript ECMAScript ECMAScript"); 

04 Var regExp gi = /ECMAS/gi; 

05 Fore (Uva = 1 3 El 

06 Var result gi = regExp gi.exec(strTxt); 

07 console.log("exec /ECMA/gi return : "+ result gi + "at "+ regExp gi.lastIindex); 
08 } 


090MN</secript> 


关于 【代码 14-6】 的 分 析 如 下 : 

第 02 行 代码 定义 了 一 个 字符 串 变 量 strTxt， 并 初始 化 为 "ECMAScript ECMAScript 
ECMAScript"， 用 作 被 检索 的 字符 串 。 

第 04 行 代码 通过 直接 量 方式 定义 了 RegExp 对 象 的 第 一 个 实例 regExp_gi， 模 式 参 数 定 义 为 字 
符 串 “/ECMAS/gi”。 注 意 ， 这 里 同时 使 用 了 “g” 和 “i” 组 合 修饰 符 标 记 。 

第 05 一 08 行 代 码 在 for 循环 语句 块 中 使 用 exec0 方 法 检索 第 04 行 代码 定义 的 模式 字符 串 
“/ECMAS/gi” 是 否 包 括 在 第 02 行 代码 定义 的 字符 串 变量 strTxt 中 ， 并 将 检索 结果 的 返回 值 保 存 
在 变量 result gi 中 。 其 中 ， 第 07 行 代 码 使 用 了 RegExp 对 象 的 “lastIndex” 属 性 获取 了 下 一 次 检索 
位 置 的 整数 值 。 

运行 页 面 ， 控 制 台 输出 的 调试 信息 如 图 14.6 所 示 。 
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Developer Tools - ECMAScript in 15-days - http://localhost:63 
[Ca Inspect Consc Debugc Style Edi Performa Memc Netwc Stora 加 =- 园 日 宗 日 口 





人 疹 定 Filter output _|Persist Logs 
Searched Txt : ECMAScript ecmascript chl4-es-regexp-gi.html:24:9 
Ecmascript 
exec /ECMA/gi return : ECMAS at 5 chl4-es-regexp-gi.html:28:13 
exec /ECMA/gi return : ecmas at 16 chl4-es-regexp-gi.html :28:13 
exec /ECMA/gi return : Ecmas at 27 chl4-es-regexp-gi.html :28:13 

>| 


14.6 ”RegExp 对 象 “g” 和 “i” 修 饰 符 标记 组 合 
如 图 14.6 所 示 , 从 第 07 行 代码 输出 的 结果 来 看 , 第 04 行 代码 定义 的 模式 字符 串 “/ECMAS/gi” 
被 成 功 检 索 到 了 ， 且 3 次 调用 的 返回 值 均 不 同 (分别 为 “ECMAS”“ecmas” 和 “Ecmas”) ， 返 
回 的 位 置 值 也 均 不 同 ( 分 别 为 5、16 和 27) ， 说 明 每 次 执行 完 第 06 行 代 人 码 的 exec0 方 法 后 ， 下 一 
次 检索 的 位 置 是 按照 顺序 计算 的 。 由 此 可 见 ， 第 04 行 代码 定义 的 “g” 和 “1” 修饰 符 标记 组 合 起 
到 了 作用 。 


14.4 ”本 竟 小 结 


本 章 主 要 介绍 了 ECMAScript 语法 规范 中 关于 正则 表达 式 RegExp 对 象 的 知识 ， 有 具体 包括 正则 
表达 式 基础 、RegExp 对 象 方法 、RegExp 对 象 修 饰 竺 标记 等 方面 的 内 容 ， 并 通过 一 些 具 体 实 例 进 行 
了 讲解 。 


274 


面 吕 对象 编程 


本 章 将 介绍 ECMAScript 语法 规范 中 面向 对 象 编 程 的 内 容 ， 有 具体 包括 面向 对 象 、 对 象 作用 域 、 
继承 机 制 ， 以 及 ECMAScript 6 面 问 对 象 新 特性 等 内 容 。 可 以 说 ， 面 问 对 象 编 程 是 ECMAScript 语 
法 规范 中 学 习 难 度 比较 大 ， 但 也 是 最 能 提高 设计 人 员 编 程 技术 的 部 分 。 


15.1 面 加 对 象 基础 


15.1.1 什么 是 “ 面 回 对 象 ” 


“ 面 问 对 象 编 程 《OOP) ”是 一 个 非常 时 荆 的 词汇 ， 大 家 在 讨论 高 级 程序 设计 语言 时 ， 免 不 
了 要 提 到 该 程序 设计 语言 是 否 支 持 “ 面 癌 对 象 ”的 技术 。 

为 什么 面 问 对 象 如 此 重要 呢 ? 那 是 因为 早期 程序 设计 语言 都 是 “ 面 癌 过程 ”的 ， 非 常 适用 于 
早期 的 应 用 程序 《代码 量 小 且 可 控 ) 。 后 来 ， 随 看 应 用 程序 需要 实现 的 功能 越 来 越 多 及 设计 难度 的 
越 来 越 高 ， 程 序 的 代码 量 也 开始 呈 几 何 级 数 增 长 ， 维 护 难 度 越 来 越 大 ， 这 时 候 “ 面 癌 过 程 ”的 程序 
设计 语言 就 显得 落后 了 。 

人 类 面 对 困 难 总 是 知 难 而 上 的 。 聪 明 的 程序 员 开 始 思 考 如 何 对 代码 进行 优化 、 复 用 和 重 构 ， 
从 根本 上 解决 “ 面 问 过 程 ” 设 计 理 念 的 不 足 。 于 是 ，“ 面 问 对 象 ”的 设计 理念 束 开 始 出 现 了 ， 高 级 
程序 设计 语言 也 如 雨后春笋 般 ， 呈 现 出 壹 气 的 发 展 趋势 。 这 里 比较 有 代表 性 就 是 C++ 语言 和 Java 
语言 ， 也 是 目前 大 学 的 必修 课 。“ 面 问 对 象 ” 的 设计 理念 解决 了 很 多 “ 面 回 过 程 ” 设 计 理 念 的 不 足 ， 
从 根本 上 解决 了 代码 优化 、 复 用 和 重 构 的 问题 ， 可 以 说 是 计算 机 软件 发 展 过 程 中 重要 的 里 程 碑 。 

ECMAScript 脚本 语言 作为 后 起 之 郁 ， 目 然 也 会 在 设计 理念 上 保持 先进 性 ， 因 此 也 实现 了 
ECMAScript 版 本 的 “面向 对 象 ” 功 能 。 当 然 ， ECMAScript 的 “ 面 问 对 象 ”技术 与 传统 的 “ 面 回 
对 象 ” 技 术 在 实现 上 还 是 有 一 定 区 别 的 (很 多 程序 员 认 为 ECMAScript 的 实现 更 为 先进 ， 这 里 就 不 
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做 深究 了 ) ， 但 笔者 认为 有 区 别 不 重要 ， 关 键 是 能 够 实现 设计 理念 就 是 成 功 的 。 


15.1.2 ” 面 品 对 象 的 特点 


一 般 来 说 ， 面 问 对 象 的 程序 设计 语言 需要 满足 以 下 4 种 基本 功能 : 


e@ 封装 : 能 够 实现 将 数据 或 方法 存储 在 对 疹 中 的 功能 。 

e@ 聚集 : 能 够 实现 将 一 个 对 象 存 储 在 另 一 个 对 象 内 的 功能 。 

e@ 继承 : 能 够 实现 将 另 一 个 类 (或 多 个 类 ) 的 属性 和 方法 完整 获取 过 来 的 功能 。 
e@ 多 态 : 能 够 实现 以 多 种 方法 运行 的 函数 或 方法 的 功能 。 


因为 ECMAScript 语法 规范 中 完全 文 持 以 上 这 些 功能 要 求 ， 所 以 JavaScript 被 认为 是 “和 面 问 对 
象 ” 的 高 级 程序 设计 语言 。 


15.1.3 ”面向 对 象 的 专业 术语 


面 癌 对 象 作为 一 种 高 级 程序 语言 设计 技术 ， 上 自然 会 有 其 专用 的 技术 术语 。 下 面 就 列举 几 个 常 
用 的 术语 。 

1. 类 (class) 

每 个 对 象 都 由 类 (class) 来 定义 ， 可 以 把 类 看 作对 象 的 装配 工具 。 类 (class) 不 仅 要 定义 对 象 
的 接口 (interface， 开 发 者 访问 的 属性 和 方法 ) ， 还 要 定义 对 和 象 的 内 部 工作 (使 属性 和 方法 发 挥 作 
用 的 代码 ) 。 

2. 对 象 实例 

关于 对 象 的 实例 在 前 面 有 过 介绍 ， 其 实 “ 类 ”与 “对 象 ” 是 两 个 紧密 关联 的 概念 。 程 序 在 使 
用 类 创建 对 象 时 ， 生 成 的 对 象 可 以 称 为 “类 的 实例 ”或 “对 象 实例 ”。 

3. 类 与 对 象 的 关系 

这 里 需要 特别 解释 的 就 是 ， 在 ECMAScript 脚本 语言 中 关于 “类 ”与 “对 象 ”的 关系 。 其 实 ， 
在 早期 ECMAScript 版 本 (具体 说 是 ECMAScript 6 之 前 ) 语法 规范 中 并 没有 “类 ”的 概念 ， 它 是 
通过 “对 象 ” 来 蔡 代 “类 ”的 功能 的 。 但 是 ， 在 当前 的 ECMAScript 6 版 本 (ECMA-262 规范 ) 中 ， 
又 增加 了 class 关键 字 用 来 实现 “类 ”的 新 特性 ， 这 一 点 确实 让 设计 人 员 有 点 月 沉 了 。 

无 论 怎么 说 ，ECMAScript 脚本 语言 的 面向 对 象 编程 与 传统 语言 (C 或 Java 语言 等 ) 的 面 问 对 
象 编程 还 是 有 一 定 区 别 的 。 本 质 上 ，“ 对 象 ” 与 “类 ”只 是 名 称 的 区 别 ， 通 过 ECMAScript 脚本 语 
言 提供 的 特性 来 实现 面 加 对 象 编程 的 功能 才 是 最 终 目 标 。 
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15.2 ”ECMAScript 对 象 作用 域 


本 节 将 介绍 ECMAScript 对 象 作 用 域 的 知识 ， 包 括 变量 作用 域 和 this 关键 字 。 


15.2.1 ”变量 作用 域 


学 习 过 C++ 或 Java 等 面 问 对 象 编程 语言 的 读者 都 知道 ， 类 的 成 员 属 性 和 方法 〈 也 可 以 理解 为 
对 象 的 ) 都 是 有 作用 域 这 个 概念 的 。 有 具体 的 作用 域 大 致 可 分 为 公有 、 私 有 和 受 保护 3 种 形式 。 当 然 ， 
可 能 每 种 面向 对 象 编程 语言 所 规定 的 名 称 或 定义 的 形式 略 有 区 别 ， 大 体 模 式 却 是 一 样 的 。 

但 是 ,在 ECMAScript 语 法 规范 中 并 没有 公有 、 私 有 和 受 保护 这 几 种 作用 域 的 概念 .ECMAScript 
语法 规范 中 只 定义 了 公有 作用 域 这 个 形式 , 所 有 对 象 的 属性 和 方法 都 是 公有 的 , 原则 上 都 可 以 被 访 
问 和 使 用 。 

这 对 于 大 多 数 设 计 人 员 来 说 非常 不 习惯 ,于 是 有 些 设计 人 员 就 人 为 地 规定 了 一 些 作 用 域 的 形 
式 ， 但 这 些 规定 都 不 是 标准 规范 ， 仅 仅 是 约定 俗 成 的 ， 原 则 上 是 无 法 改变 ECMAScript 对 象 是 公有 
的 这 个 概念 的 。 


15.2.2 this 关键 字 


学 习 ECMAScript 脚本 语言 的 过 程 中 ， 大 多 数 读者 可 能 不 会 在 意 前 面 提 到 的 关于 作用 域 的 概 
念 。 但 是 ，this 关键 字 确 实 是 必须 掌握 的 、 非 常 重 要 的 一 个 概念 。 要 理解 并 掌握 this 关键 字 ， 首 先 
要 大 致 理解 作用 域 的 概念 ， 最 关键 的 是 要 熟练 掌握 作用 域 在 对 象 中 的 使 用 方法 。 

如 果 用 一 句 话 来 概括 this 关键 字 的 概念 , 那么 可 以 将 this 关键 字 定 义 为 “指向 所 调用 方法 或 属 
性 的 对 象 ”。this 关键 字 在 具体 代码 应 用 中 非常 灵活 ， 读 者 需要 多 加 练习 才 可 以 熟练 掌握 。 

下 面 是 一 个 使 用 this 关键 字 的 简单 代码 示例 〈 详 见 源 代码 ch15 目录 中 的 ch15-es-oop-this.html 
文件 ) 。 

【代码 15-1 】 


01 <script type="text/javascript"> 


02 console.1og("-----—-— object's this ------"); 

03 Var oThis = new Object; 

04 oThise Prop = DYEOPT> 

0 oThis.showProp = function () { 

06 onsoleslod( EnisDeEop TT hi pop 

0 eonsoles loglnoThis peop 7 oThise peop)e 

08 } 

09 oThis .showProp (); 

10 console.1o0g("------ this of the page level ------"); 
1 eonsoles Log(l thls FTEs) 


2 scriplb> 


pa 
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关于 【代码 15-1】 的 分 析 如 下 : 

第 03 行 代码 通过 new 关键 字 创 建 了 Object 对 象 的 一 个 对 象 实 例 , 并 将 其 存储 到 变量 oThis 中 。 

第 04 行 代码 为 对 象 实例 oThis 定义 了 一 个 prop 属性 ， 并 进行 初始 化 操作 。 

第 05 一 08 行 代码 为 对 象 实例 oThis 定义 了 一 个 showProp 方法 。 其 中 ， 第 06 行 代码 使 用 this 
关键 字 调 用 了 prop 属性 , 并 输出 其 属性 值 ; 第 07 行 代码 直接 使 用 对 象 实例 oThis 调用 了 prop 属性 ， 
并 输出 其 属性 值 。 

第 09 行 代 码 通过 对 象 实例 oThis 调用 showProp 方法 。 

第 11 行 代码 直接 在 浏览 器 控制 台中 输出 this 关键 字 的 内 容 。 

运行 页 面 ， 控 制 台 输出 的 调试 信息 如 图 15.1 所 示 。 通 过 this 关键 字 调 用 prop 属性 和 直接 调用 
对 象 实例 oThis 的 属性 的 结果 是 相同 的 。 如 果 在 页 面 中 直接 使 用 this 关键 字 ， 那 么 this 代表 的 是 
Window 窗口 对 象 。 

Developer Tools - ECMAScript in 15-days - http://localhost:6334 
局 ”Inspect Conso Debugg Style Edil Performar Memo Netwo Storac 回 - 园 上 日 宗 日 口 


从 时 Filter output |_j PersistLogs 
------ object's this ------ chlS5-es-oop-this.html:23:9 
ot : prop 二 "prop" 属性 相同 OR 
oThis.prop : prop chl5-es-oop-this.html:28:13 
-~----- this of the page level ------ chlS5-es-oop-this.html:31:9 
this : [object Window] chlS5-es-oop-this.html:32:9 





15.1 this 关键 字 


上 面 的 代码 实例 介绍 的 就 是 this 关键 学 的 一 些 基 本 使 用 方法 ， 后 面 的 代码 实例 中 还 会 有 大 量 
对 this 关键 字 的 使 用 ， 读 者 可 以 循序 渐进 地 学 习 。 


15.3 ”创建 ECMAScript 类 与 对 象 


本 节 将 继续 介绍 如 何 创 建 ECMAScript 类 与 对 象 ， 包 括 工 厂 模 式 、 构 造 方法 方式 和 原型 方式 等 
方面 的 内 容 。 


15.3.1 工厂 模式 创建 类 与 对 象 


在 ECMAScript 语法 规范 中 是 没有 “class” 这 个 关键 字 的 ， 也 就 是 说 我 们 是 无 法 像 C 或 Java 
语言 那样 创建 “类 ”的 。 听 起 来 有 些 不 可 思议 ， 不 使 用 “class” 怎 么 定义 “类 ”了 呢 ， 但 这 也 正 是 
JavaScript 脚本 语言 的 特点 。 

因为 ECMAScript 语法 规范 中 规定 了 一 切 赂 为“ 对象”， 那 是 不 是 可 以 用 Object 对 象 来 定义 

“类 ” 呢 ? 答案 是 肯定 的 ， 就 是 使 用 设计 模式 中 非常 有 名 的 工厂 〈Factory ) 模式 。 

下 面 是 一 个 定义 ECMAScript 类 (对象) 的 基本 代码 示例 〈( 详 见 源 代码 ch15 目录 中 的 

ch15-es-oop-factory-object.html 文件 ) 。 
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【代码 15-2】 


01 
四 之 
QS 
04 
05 
06 
07 
08 


<script type="text/javascript"> 


Var userInfo = new Object; 

userIinfoid = "i123"; 

userInfo .name = "tina"; 

UserInfo .emalil = "tina@email .com"; 

userInfo .showInfo = function () { 
Sonaolen lo a hi 
console.log("name : " + this.name); 
console.log("email : " + this.email); 

}; 

userIinfo.showInfo(); 

userIinfo = null; 


<hacript> 


关于 【代码 15-2】 的 分 析 如 下 : 

第 02 行 代码 通过 new 关键 字 创 建 Object 对 象 的 一 个 对 象 实例 , 并 将 其 存储 到 变量 userInfo 中 。 

第 03 一 05 行 代码 为 对 象 实例 userInfo 定义 一 组 属性 ， 并 进行 初始 化 操作 。 

第 06 一 10 行 代 码 为 对 象 实例 userInfo 定义 一 个 showInfo 方法 。 其 中 ， 第 07 一 09 行 代 码 依次 
使 用 this 关键 字 调 用 了 对 象 实例 userInfo 的 一 组 属性 ， 并 在 浏览 器 控制 台中 输出 其 属性 值 。 

第 11 行 代码 通过 对 象 实例 userInfo 调用 showInfo 方法 。 

第 12 行 代 码 以 手动 方式 清除 第 02 行 代 码 定 义 的 对 象 实例 userInfo。 

运行 页 面 ， 控 制 台 输出 的 调试 信息 如 图 15.2 所 示 。 代 码 中 定义 的 userInfo 对 象 已 经 具有 “类 ? 
的 基本 特性 了 ， 包 括 属 性 和 方法 的 使 用 功能 。 


当然 
- TY 9 


Developer Tools - ECMAScript in 15-days - http://localhost:63342 





[a Inspect Conso Debugg Style Edit Performar Memo Netwo Storag 轩 ~" 园 日 内 日 可 I 


闸 时 Filter output _] Persist Logs 
0 2 E23 “00p-factory-object.html:28:13 
name : tina "O00p-factory-object.html:29:13 
email : tina@email .com “00p-factory-object.html :30;13 


beeseeanssanssansannaaanannnnannnnnannnnnnnnenanaanaannananananannanannnnnanaaanaannnnannnnnennnnnnnnannnnenananaaaaaaaaaaanaannad 


15.2 工厂 模式 创建 类 和 对 象 


【代码 15-2] 创建 “类 ”的 方式 也 有 很 多 问题 ， 最 大 的 问题 就 是 userInfo 对 象 是 根本 无 


法 重用 的 ， 只 有 通过 重复 创建 新 的 、 类 似 userInfo 对 象 实例 的 方式 才 可 以 完成 “类 ”的 功能 。 


15.3.2 ”封装 的 工厂 模式 创建 类 与 对 象 


在 ECMAScript 规范 下 如 何 实 现 “ 类 ”的 重用 呢 ? 可 以 在 工厂 模式 的 基础 上 通过 封装 的 形式 实 
现 “ 类 ”的 重用 。 所 谓 “ 封 装 ”， 就 是 通过 ECMAScript 图 数 的 方式 将 定义 “类 ”的 过 程 封 装 进去 ， 
然后 通过 返回 对 象 来 实现 创建 “类 ”的 功能 。 

下 面 是 一 个 定义 封装 形式 的 ECMAScript 类 〈 对 象 ) 的 代码 示例 〈 详 见 源 代 码 ch15 目录 中 的 
ch15-es-oop-factory-func.html 文件 ) 。 
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【代码 15-3 】 


01 <script type="text/javascript"> 


02 function createUserIinfo() { 

03 Var USserInfo = new Object; 

04 userintosld ae "T1223 

05 userInfo.name = "tina"; 

06 userInfo.email = "tina@email.com"; 

(OM userInfo.showInfo = function () { 

08 eonsolecslogl nde TEST 

09 console.log("name : " + this.name); 

10 console.log("email : " + this.email); 

I }; 

1 2 return userIinfo; 

站 三 | } 

14 console.10g("------— object instance 1 ------ 六 
1 var TU LU = CreateUserinto()s 

16 v UT 1 showIinfols 

区 console.1log("------ Object instance 2 -----— > 
18 var Vv UI 2 = CreateUserInfo ()， 

EE TUL 2.ShnowInEo()s 


Sa ey sol she>s 


关于 【代码 15-3】 的 分 析 如 下 : 
【代码 15-3】 与 【代码 15-2】 的 主要 区 别 就 是 , 第 02 一 13 行 代码 通过 一 个 图 数 createUserInfo() 

的 方式 将 第 03 一 11 行 代码 定义 “类 ”的 过 程 封闭 了 进去 。 同 时 ， 第 12 行 代码 通过 函数 返回 值 的 方 
式 返回 了 对 象 实例 userInfo。 

第 15 和 第 18 行 代码 分 别 通 过 调用 函数 createUserInfo() 的 方式 , 定义 了 两 个 userInfo 类 的 对 象 
实例 。 

第 16 和 第 19 行 代码 通过 调用 userInfo 类 的 showInfo0 方 法 ， 在 浏览 器 控制 台中 输出 对 象 实例 
的 内 容 。 

运行 页 面 ， 控 制 台 输出 的 调试 信息 如 图 15.3 所 示 。 第 15 和 第 18 行 代码 定义 的 两 个 对 象 实例 
输出 了 相同 的 结果 ， 这 样 就 解决 了 “类 ”重复 使 用 的 问题 。 


Developer Tools - ECMAScript in 15-days - http://localhost:63 
[a Inspect Conso Debugc Style Ed Performa Memc Netwc Storat ~" 轩 上 目 穴 口 了 可 





会 时 Filter output (| Persist Logs 
------ object instance 1 ------ "-OO0p-factory-func.html:35:9 
| i 3 23 "~00p-factory-func.html:29:17 
name : tina ~00p-factory-func.html:30:17 
email : tina@email .com “O00p-factory-func.html:31:17 
-~------ object instance 2 ------ -00p-factory-func.html:38:9 
3 : B23 -<DOp-factory-func.htmt:29:17 
name : tina “00p-factory-func.html:30:17 
email : tina@email .com “O00p-factory-func.html:31:17 

BB 


ecocnenecacnepecacnenecaeneneceenecacaenececaecectececectenecteeetecctececaetececteReciceEiCRECCRCeCICEECICEEECCECCECECEEEICECECECRCEECCECCICRELCICECECEICEEEICECRECCRCCIEECRECCRCCECCCCRCLEECEEECEELCICECERCCCCRECCRCEECCECECCECECRCECRECCCEEEEEEEEE 


15.3 封装 的 工厂 模式 创建 关 和 对 象 


不 过 ，【 代 码 15-3】 创建“ 类 ”的 方式 还 是 有 一 些小 问题 ，“ 类 ”的 属性 值 都 是 固定 的 ， 难 
道 每 次 使 用 不 同 的 属性 值 时 都 要 重新 定义 “类 ” 吗 ? 其 实 解决 方式 很 简单 ,只 要 为 封装 函数 带 上 参 
数 就 可 以 了 。 
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15.3.3” 带 参数 的 工厂 模式 创建 类 与 对 象 


为 封装 函数 带 上 参数 与 我 们 通常 定义 带 参 数 的 ECMAScript 图 数 是 一 样 的 , 这 样 就 可 以 在 实例 

化 对 象 时 定义 不 同 的 属性 值 了 。 

下 面 是 一 个 定义 封装 形式 的 、 并 有 图 数 参 数 的 ECMAScript 类 (对象 ) 的 代码 示例 〈 详 见 源 代 

码 ch15 目录 中 ch15-es-oop-factory-func-param.html 文件 ) 。 
【代码 15-4】 


01 
02 
03 
04 
05 
06 
07 
08 
Ws, 
10 
ul 
I 
二 | 
14 
1 
16 
a 
18 
19 
20 


<script type="text/javascript"> 


function createUserIinfo(id, name, email) { 
var userInfo = new Object; 
userInfo.id = id; 
userIinfo.name = name; 
UserInfo.email = email; 
userIinfo.showInfo = function () { 
rh cl gl -ol i 
"nus na 
"this emairly: 


consoles log( id es: 
console.log("name : 
console.log("email : 


}; 
return userIinfo; 
} 
console.,10g("-----— object instance 1 -----——"); 


第 15 章 面向 对 象 编程 


var Vv UI 1 = CreateUserInfo ("123"， "tina", "tina@email.com"); 


VUIIl ShowIinEols 
console.log("-----—- object instance 2 ------—");} 


var Vv UI 2 = createUserIinfo("520", "XiXxi" "xixi@email.com"); 


Vv_UI 2.showIinfo(); 


SCETDE> 


关于 【代码 15-4】 的 分 析 如 下 : 
【代码 15-4】 与 【代码 15-3】 的 主要 区 别 就 是 ， 第 02 一 13 行 代码 在 定义 函数 createUserInfo() 
的 方式 中 增加 了 函数 参数 的 定义 。 
第 15 和 第 18 行 代码 在 调用 函数 createUserInfo() 的 过 程 中 ,通过 定义 参数 值 进行 了 初始 化 操作 。 
运行 页 面 ， 控 制 台 输出 的 调试 信息 如 图 15.4 所 示 。 第 15 行 和 第 18 行 代码 定义 的 两 个 对 象 实 


例 输出 了 不 同 的 结果 ， 这 样 就 解决 了 “类 ”初始 化 不 同属 性 值 的 问题 。 


Developer Tools - ECMAScript in 15-days - http://localhost:63342/' 





a Inspect¢ Consol Debugg' Style Edit Performan Memor Networ Storag ~" 园 目 窗口 可 


从 时 Filteroutput Persist Logs 
------ object instance 1 ------ ~-factory-func-params.html:35:9 
| 3 :23 ~factory-func-params.html:29:17 


name : tina 

email : tina@email .com 

-~----- object instance 2 ------ 
id : 520 

name : Xixi 

email ; xixi@email .com 


15.4” 带 参数 的 工厂 模式 创建 类 和 对 象 


“~factory-func-params.html:30:17 
“factory-func-params.html:31:17 
“~-factory-func-params.html :38:9 
-factory-func-params .htmt:29:17 
~factory-func-params.html:30:17 
~factory-func-params.html:31:17 
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15.3.4 ”工厂 模式 的 最 大 局 限 


经 过 前 面 的 介绍 ， 似 乎 通过 工厂 模式 (Factory ) 创建 ECMAScript 类 和 对 象 已 经 可 以 解决 问题 
了 ， 其 实 是 经 不 住 严格 推 阁 的 。 再 回 到 【代码 15-4】 中 ， 每 当 创 建 一 个 userInfo 对 象 实例 ， 第 07 一 
11 行 代码 定义 的 方法 就 会 被 重新 创建 一 次 , 即 每 一 个 userInfo 对 象 实例 都 会 有 属于 上 自己 的 showInfo 
方法 。 这 也 正 是 纯 工厂 模式 的 最 大 局 限 ( 可 以 参阅 一 些 关 于 设计 模式 的 教科 书 )。 

那么 怎么 解决 这 个 问题 呢 ? 最 直接 的 方法 就 是 将 showInfo 方法 的 定义 放 在 工厂 函数 
createUserInfo() 的 外 和 面 ， 然 后 通过 定义 “类 ”属性 的 方式 指 问 该 函数 (类 似 于 函数 指针 〉。 

下 面 是 一 个 按照 上 述 解决 办 法 来 定义 ECMAScript 类 (对象) 的 代码 示例 ( 详 见 源 代码 ch15 
目录 中 的 ch15-es-oop-factory-func-re.html 文件 ) 。 

【代码 15-5】 


01 <script type="text/javascript"> 


02 Function showlnEol od 

加 总 console. loglvid .bthlise lo 

04 console.log("name : " + this.name); 

Qs console.log("email : " + this.email); 

06 } 

,0 function createUserIinfo(id, name, email) { 

08 Var userIinfo = new Object; 

09 userInfo.id = id; 

10 userIinfo.name = name; 

1 userInfo.email = email; 

之 userIinfo.showInfo = showInfo; 

13 return userIinfo; 

14 } 

二 号 console.1o0og("------ object :instance 1 ------"); 

16 var Vv UI 1 = createUserIinfo("123", "tina", "tina@email.com"); 
I Vv UI 1.showInfo(); 

Is console.10g("------ object instance 2 -----—");} 

19 var TUT2 = CreateUserIinfo("S20", "xixi",. "XxixiQemail.com")s 
20 v UT'2.9ShowInfo(): 


ZH Cele 


关于 【代码 15-5】 的 分 析 如 下 : 
【代码 15-5] 与 【代码 15-4] 的 主要 区 别 就 是 ,第 12 行 代码 定义 的 对 象 实例 userInfo 的 showInfo 
属性 ， 该 属性 所 指 问 的 属性 值 showInfo 对 应 第 01 一 06 行 代 码 定 义 图 数 showInfo0) 。 
通过 上 面 这 种 方式 就 避免 了 “类 ?的 方法 被 对 象 实例 重复 创建 的 过 程 , 这 样 每 定义 一 个 userInfo 
对 象 实例 ,showInfo 属性 值 就 相当 于 一 个 函数 指针 ， 均 指 问 第 01 一 06 行 代码 定义 图 数 showInfo()。 
运行 页 面 ， 控 制 台 输出 的 调试 信息 如 图 15.5 所 示 。 从 浏览 器 控制 台 的 输出 结果 来 看 ，【 代 码 
15-5】 与 【代码 15-4】 的 效果 是 完全 一 致 的 。 
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Developer Tools - ECMAScript in 15-days - http://localhost:63342/W 
CR Inspectc Consol Debugge Style Edit' Performan Memor Networ Storag 轩 " 轩 上 日 肉 口 可 


人 向 时 Filter output | Persist Logs 
==----- object instance 1 ------ “-O00p-factory-func-re.html :36:9 
4 3 223 “O00p-factory-func-re.html :24:13 
name : tina “O00p-factory-func-re.html:25:]13 
| email : tina@email .com “O00p-factory-func-re.htmil:26:13 
------ object instance 2 ------ “~-00p-factory-func-re.html:39:9 
id : 520 “O00p-factory-func-re.html:24:13 
name : Xxixi “O00p-factory-func-re.html:25:13 
email : xixi@email .com "O00p-factory-func-re.html :26:13 

i >| | 


Besemnsensensensensennsenseneens nnernsens nn nn nn nn nn nnn nnn 


15.5 ”改进 工厂 模式 的 局 限 


15.3.5 ”构造 函数 方式 创建 类 与 对 象 


工厂 模式 是 程序 语言 设计 模式 的 一 大 进步 ， 但 正如 前 面 的 代码 实例 所 显示 的 结果 一 样 ， 该 方 
式 也 有 一 定 的 局 限 性 。 于 是 ， 设 计 人 员 又 提出 通过 构造 图 数 方式 来 创建 ECMAScript 类 与 对 象 。 
下 面 是 一 个 通过 构造 函数 方式 定义 ECMAScript 类 《对 象 ) 的 代码 示例 〈 详 见 源 代码 ch15 日 
录 中 的 ch1$-es-oop-constructor.html 文件 ) 。 
【代码 15-6】 


QL 
02 
03 
04 
US 
06 
07 
08 
IE， 
10 
Bl 
1 
3 
14 
13 
下 
18 


<script type="text/javascript"> 


function UserIinfo(id, name, email) { 
thisecid = 1d» 
this.name = name; 
this.email = email; 
this.showInfo = function () 1{ 
CensecTesog(naeoecha se 1d) 
console.log("name : " + this.name); 
console.log("email : " + this.email); 
js 
} 
console.1o0og("------ new object instance 1 ------ hy 
var Vv UI 1 = new UserInfo ("123"， "tina", "tina@email.com"); 
V_ UI 1.showInfo(); 
console.10g("------ new object instance 2 ------— 0 
varv Ur2 一 nemiUserIntol 2077 "xixi"r "xixidemlil Com) > 
v UI 2.ShowInfo() ， 


/oeript> 


关于 【代码 15-6】 的 分 析 如 下 : 

【代码 15-6】 与 【代码 15-4】 的 主要 区 别 就 是 ， 第 02 一 11 行 代码 通过 一 个 构造 函数 UserInfo() 
的 方式 定义 了 一 个 类 UserInfo。 注 意 ， 一 般 需 要 将 类 名 称 首 字母 大 写 ， 以 区 别 函数 方法 。 

从 第 02 一 11 行 代码 中 可 以 看 到 ， 构 造 函 数 方式 下 既 没 有 创建 (new) 对 象 也 没有 定义 返回 值 。 
同时 ， 构 造 函数 内 的 属性 都 是 通过 this 关键 字 来 引用 的 。 

在 第 13 行 和 第 16 行 代 码 中 两 个 UserInfo 类 的 对 象 实例 都 是 通过 new 关键 字 来 创建 的 ， 这 也 
是 构造 函数 方式 与 工厂 模式 的 主要 区 别 之 一 。 

运行 页 面 ， 控 制 台 输出 的 调试 信息 如 图 15.6 所 示 。【 代 码 13-6】 和 【代码 15-4】 输 出 的 结果 
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是 完全 相同 的 , 而 且 【 代 码 15-6】 的 代码 结构 与 形式 更 像 传 统 意 义 上 的 面 问 对 象 语言 (如 C++、Java 
等 ) 。 


Developer Tools - ECMAScript in 15-days - http://localhost:63342/Webstc 
[ Inspector Console Debuggel Style Edito Performanc Memory Networl Storage 加 -> 园 日 宗 口 可 





曾 时 Filteroutput PersistLogs 

------ new object instance 1 ------ chl5-es-oop-constrcuyutor.html :33:9 

| id : 323 chl5-es-o0p-constrcutor.html :28:17 

name : tina chlS5-es-oop-constrcutor.html :29:17 

email : tina@email .com chl5-es-oop-constrcutor.htmil :30:17 

------ new object instance 2 ------ chlS5-es-oop-constrcuytor.html:36:9 

id : 520 chlS5-es-oop-constrcutor.html :28:17 

name : Xxixi chl5-es-o0op-constrcutor.html:29:17 

email : xixi@email .com chlS5-es-oop-constrcutor.html:30:17 
poorer | 
>| 


15.6 ”构造 函数 方式 创建 类 和 对 和 象 


不 过 ，【 代 码 15-6】 创 建 类 的 方式 与 前 面 几 个 代码 实例 类 似 ， 也 会 出 现 类 的 方法 被 重复 定义 
的 问题 。 那 么 有 没有 更 人 简单、 更 合理 的 方式 呢 ? 管 案 是 肯定 的 ， 我 们 接 厦 往 下 看 。 


15.3.6 ”原型 方式 创建 类 与 对 象 


ECMAScript 脚本 语言 最 特别 的 就 是 提供 了 一 个 原型 (prototype ) 属性 。 具 体 来 说 ， 原 型 
(prototype) 属性 是 由 Object 对 象 提供 的 ， 且 可 以 被 其 他 对 象 所 继承 。 

前 面 也 多 次 提 到 了 ECMAScript 脚本 语言 中 “一 切 丝 为 对 象 ” 的 概念 ， 因 此 任何 一 个 对 象 也 目 
然 会 有 原型 (prototype ) 属性 。ECMAScript 脚本 语言 通过 原型 (prototype) 属性 可 以 添加 属性 和 
方法 ， 即 借助 原型 (prototype ) 方式 就 可 以 创建 类 与 对 象 。 

下 面 是 一 个 通过 原型 (prototype) 方式 定义 ECMAScript 类 〈 对 象 ) 的 基本 代码 示例 〈 详 见 源 
代码 ch15 目录 中 的 ch15-js-oop-prototype.html 文件 ) 。 

【代码 15-7】 


01 <script type="text/javascript"> 


02 funcection UserTnfo() rl 

U3 } 

04 UserIinfo.prototype.id = "123"; 

05 UserInfo .prototype .name = "tina"; 

06 UserInfo .Prototype .emalil = "tina@email .com"; 

07 UserInfo .Prototype .showInfo = function () { 

08 Sonsole, Log(l"id EniSscaQj2 

09 console.log("name : " + this.name); 

10 console.log("email : " + this.email); 

bal }; 

| 之 console.1l0og("------ new object instance 1 -----—-");} 
1 var Vv UI 1 = new UserInfo(); 

14 Ulli Shnonintous 

Ls console.10g("------— new object instance 2 -----—-—");} 
16 var Vv UI 2 = new UserInfo(); 

3 Bi VOU 2 SnomntEole 


i100 /seript> 
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关于 【代码 15-7】 的 分 析 如 下 : 

原型 方式 的 特点 就 是 如 第 02 和 第 03 行 代 人 码 先 定义 一 个 空 的 构造 函数 UserInfo()， 然 后 如 第 
04 一 11 行 代码 通过 prototype 属性 为 这 个 构造 函数 UserInfo0 定 义 属性 和 方法 ,从 而 完成 ECMAScript 
类 (对象 ) 的 创建 过 程 。 

运行 页 面 ， 控 制 台 输出 的 调试 信息 如 图 15.7 所 示 。 从 浏览 器 控制 台 的 输出 结果 来 看 ， 第 13 和 
第 16 行 代 码 定 义 的 对 象 实例 输出 了 相同 的 内 容 , 主要 是 因为 构造 图 数 UserInfo(0) 没 有 定义 参数 造成 
的 。 





Developer Tools - ECMAScript in 15-days - http://localhost:63342/We 


[a ”Inspectc Consol Debugge Style Editc Performan' Memor Networ Storag' 团 " 辕 目 鹤 口 了 可 


会 时 Filter output [| Persist Logs 
------ new object instance 1 ------ chlS-es-o0op-prototype.html :33:9 
了 ,人 chl5-es-oop-prototype.html :29:13 
name : tina chl5-es-oop-prototype.html:30:13 
| email : tina@email .com chl5-es-oop-prototype.html :31:13 
------ new object instance 2 ------ chl5-es-00p-prototype .htm1:36;9 
id 3 了 23 chl5-es-o0op-prototype.html :29:13 
name : tina chl5-es-o0p-prototype.html :30:13 
email : tina@email .com chl5-es-oop-prototype.html :31:13 

>| | 


15.7 原型 方式 创建 类 和 对 和 象 


那么 能 不 能 解决 市 参数 这 个 问题 昵 ? 根 据 原 型 方式 的 特点 ， 属 性 和 方法 均 是 通过 原型 
(prototype ) 属性 来 定义 的 ， 单 单 依靠 原型 方式 确实 有 些 困难 。 不 过 ， 将 原型 方式 与 构 迁 函数 方式 
结合 起 来 ， 还 是 能 够 解决 问题 的 ， 我 们 接 看 往 下 看 。 


15.3.7 ”结合 构造 函数 方式 与 原型 方式 创建 类 和 对 象 


前 面 已 经 详细 介绍 了 通过 构造 函数 方式 创建 ECMAScript 类 与 对 象 , 以 及 通过 对 象 与 原型 方式 
创建 ECMAScript 类 与 对 象 的 过 程 。 本 小 节 结 合 上 述 两 种 方式 来 实现 全 新 的 创建 ECMAScript 类 与 
对 象 的 方式 。 

下 面 是 一 个 通过 结合 构造 函数 方式 与 原型 (prototype) 方式 定义 ECMAScript 类 (对象) 的 代 
码 示 例 ( 详 见 源 代码 ch15 目录 中 的 ch15-es-oop-constructor-prototype.html 文件 ) 。 

【代码 15-8】 


01 <script type="text/javascript"> 


02 function UserIinfo(id, name, email) { 

由 车) tihngsid Ge 

04 this .name = name; 

0 this.email = email; 

06 } 

07 UserIinfo.prototype.showInfo = function () { 
08 Seonsoleologl nd "Eh ds 

09 console.log("name : " + this.name); 

10 console.log("email : " + this.email); 
1 iE 

下 之 console.10g("---—--— new Object instance 1 -一 一 -一 一 ") ， 
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13 var Vv UI 1 = new UserInfo ("123"， "tina", "tina@email.com"); 
14 ViUTitL ShowInEc() 

1 console.log("-----—- new object :instance 2 ------ my 

16 var VvIUT 2 ne UserlInfo(l SU XXX XIXTLUemal Com)s 
Bf Vv UI 2.ShowInfo(): 


I eed eal oe 


关于 【代码 15-8】 的 分 析 如 下 : 

第 02 一 06 行 代码 通过 带 参数 的 构造 函数 方式 定义 了 一 个 ECMAScript 类 UserInfo(), 与 【代码 
8-6】 类 似 。 

第 07 一 11 行 代码 通过 原型 (prototype) 方式 为 上 面 的 构造 函数 UserInfo() 定 义 方法 showInfo， 
从 而 完成 ECMAScript 类 (对象) 的 创建 过 程 。 

运行 页 面 ， 控 制 台 输出 的 调试 信息 如 图 15.8 所 示 。 从 浏览 器 控制 台 的 输出 结果 来 看 ， 通 过 结 
合 构造 函数 方式 与 原型 方式 创建 ECMAScript 类 (对象 ) 是 目前 非常 理想 的 一 种 方式 。 





Developer Tools - ECMAScript in 15-days - http://localhost:63342/Websi 


[a Inspecto Console Debugge Style Edito Performanc Memon Networ| Storage 轩 " 轩 上 日 窗 日 可 


苗 时 Filteroutput Persist Logs 
| -~------ new object instance 1 ------ <-Cconstructor-prototype.htmL:33:9 
i “Constructor-prototype.html :29:13 
name : tina “COoNsStructor-prototype.html :30:13 
email : tina@email .com “Constructor-prototype.html:31:13 
------ new object instance 2 ------ -Constructor-prototype ,htmlL:36:9 

id : 520 "Constructor-prototype.html :29:13 
name : XIXI "CoNnstructor-prototype.html :30;13 
email : xixi@email .com “Constructor-prototype.html :31:13 

[>| : 


une 


15.8 结合 构造 函数 方式 与 原型 方式 创建 类 和 对 象 
15.4 ”原型 Prototype 应 用 


本 节 将 介绍 原型 (Prototype) 属性 的 几 种 应 用 方法 ， 包 括 为 ECMAScript 对 象 定 义 新 方法 、 重 
定义 已 有 方法 和 实现 类 继承 等 。 


15.4.1 定义 新 方法 


在 ECMAScript 语法 规范 中 ， 原 型 (Prototype) 属性 是 一 个 很 有 用 的 工具 。 在 实际 开发 中 ， 可 
以 通过 原型 (Prototype) 属性 为 ECMAScript 规范 中 常规 的 对 象 定义 新 的 方法 ， 上 有 具有 很 强 的 扩展 功 
能 。 

下 面 是 通过 原型 (prototype) 属性 定义 一 个 String 对 象 新 方法 的 代码 示例 ( 详 见 源 代码 ch15 
目录 中 的 ch15-es-oop-prototype-new-method.html 文件 ) 。 

【代码 15-9】 

01 <script type="text/javascript"> 

02 Var v_str = "Prototype"; 
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JU console.1og("-—--—-——-— toString () ----—— ") ; 
04 eonsole Loglv ste EOSGenag() 

05 String.prototype.toReverseString = function () f{ 
06 recurmn Chisesplitl "everseljy On 

07 }: 

08 console.1og("-—--—-—-—-— toReverseString() -----—-"); 
09 console.log(v str.toReverseString()); 


10 </Seript> 


关于 【代码 15-9】 的 分 析 如 下 : 
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ECMAScript 脚本 语言 中 针对 String 对 象 并 没有 直接 进行 倒序 的 方法 ， 这 段 代 人 码 就 是 通过 原型 
属性 为 String 对 象 添加 倒序 处 理 方 法 toReverseString 的 过 程 。 
第 05 一 07 行 代码 通过 原型 属性 为 String 对 象 定 义 了 一 个 新 方法 toReverseString， 从 图 数 命 名 


规范 来 看 正 是 与 toString0 方 法 相对 应 的 。 


第 06 行 代码 先 通 过 调用 split() 方 法 将 String 对 象 转换 为 单字 符 的 数组 ， 然 后 通过 reverse("") 
方法 对 数组 进行 倒序 操作 (注意 reverse() 方 法 是 Array 对 象 的 方法 ) ， 最 后 通过 join("") 方 法 将 字符 


数组 连接 成 字符 串 格 式 并 返回 。 


运行 页 面 ， 控 制 台 输出 的 调试 信息 如 图 15.9 所 示 。 如 图 15.9 中 箭头 所 指 ， 从 浏览 器 控制 台 的 
输出 结果 来 看 ， 通 过 调用 toReverseString0 方 法 已 成 功 将 字符 串 进 行 倒序 输出 。 


Developer Tools - ECMAScript in 15-days - http://localhost:63342/™W 





[Ca Inspectc Consol Debugge Style Edit Performan Memor Networ Storag 轩 ~" 轩 目 迪 日 可 


休 守 Filter output 
ER tostring() ------ 
Prototype 
全 toReverseString() ------ 


epytotorP 


由 


rT 


“prototype- 
“prototype- 
.prototype- 
“prototype- 


_J Persist Logs 
-method.html:24:9 
-method.html:25:9 
-method.html:29:9 
-method.html:30:9 


15.9 通过 原型 (Prototype) 属性 定义 对 象 新 方法 


15.4.2” 重 定义 已 有 方法 


通过 原型 (Prototype) 属性 除了 可 以 为 ECMAScript 语法 规范 中 常规 的 对 象 定义 新 的 方法 外 ， 


还 可 以 为 第 规 的 对 象 重 定义 已 有 的 方法 。 


下 面 是 通过 原型 属性 为 String 对 象 重 定义 一 个 已 有 方法 的 代码 示例 〈 详 见 源 代码 ch15 目录 中 


的 ch15-es-oop-prototype-revise-method.html 文件 ) 。 
【代码 15-10】 


01 <script type="text/javascript"> 


02 Var V_ str = "Prototype"; 

昌国 | ConSole .1og ( "一 一 一 一 一 一 print String ------ > 
04 console.log(v str); 

05 console.10og("------— toString() ------ 和 
06 console. log (vo Str. toString(})): 

07 String.prototype.toString = function () 1 
08 return "raevige tostring() 7 "Ehise 
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09 } 

fy console.10g("-----—-— print string after revise toString() ------— ") ; 
下 console.log(v str); 

1 by console.1o0og("-----— revise toString() ------— n) 

13 console.log(v str.toString()); 


T4</seripe> 


关于 【代码 15-10】 的 分 析 如 下 : 

对 于 一 个 String 对 象 来 说 ， 使 用 或 不 使 用 toString() 方 法 进行 输出 的 结果 是 一 样 的 ， 这 段 代 码 
就 是 通过 原型 属性 为 String 对 象 的 toString() 方 法 进行 了 重 定 义 ， 并 测试 了 重 定义 后 toString0 方 法 
的 效果 。 

第 07 一 09 行 代码 通过 原型 属性 为 String 对 象 重 定义 了 toString() 方 法 。 第 08 行 代码 在 返回 原 
始 字符 串 〈 关 键 字 this 引用 的 ) 前 插入 了 前 缀 字符 串 “revise toString(): ”。 

运行 页 面 ， 控 制 台 输出 的 调试 信息 如 图 15.10 所 示 。 在 重 定义 toString() 方 法 之 前 ， 对 String 
对 象 使 用 或 不 使 用 toString0 方 法 进行 输出 的 结果 是 一 样 的 。 而 在 重 定义 toString0 方 法 之 后 ， 对 
String 对 象 是 否 显 式 地 调用 toString0 方 法 进行 输出 的 结果 是 不 同 的 。 从 第 13 行 代码 输出 的 结果 来 
看 ， 通 过 原型 属性 重 定义 toString0 方 法 之 后 ， 输 出 的 结果 已 经 发 生 了 改变 ， 这 也 正 是 原型 属性 功 
能 强大 的 又 一 体现 。 


Developer Tools - ECMAScript in 15-days EE yAA dd 





[Ca Inspector Console Debuggel Style Editor Performance Memory Network Storage 轩 " 园 目 窗 日 可 


会 是 Filter output [| Persist Logs 
| ------ print string ------ “prototype-revise-method.html:24:9 
Prototype -prototype-revise-method.html:25:9 
------ toSstringf() ------ “prototype-revise-method.html:26:9 
Prototype “prototype-revise-method,.html:27:9 
------ print string after revise toString() ------ “prototype-revise-method.html:31:9 
Prototype “prototype-revise-method.html:32:9 
------ revise toString() ------ “prototype-revise-method.html :33:9 
revise toString() : Prototype “prototype-revise-method.html:34:9 

消 | 


15.10 ”通过 原型 (Prototype) 属性 重 定义 对 象 已 有 的 方法 


15.4.3 ”实现 继承 机 制 


原型 (Prototype) 属性 还 有 一 个 很 重要 的 功能 ， 就 是 实现 ECMAScript 类 (对象) 的 继承 机 制 。 

下 面 是 一 个 通过 原型 属性 实现 继承 机 制 的 代码 示例 〈 详 见 源 代码 ch15 目录 中 的 ch15-es-oop- 
prototype-inherit.html 文件 ) 。 

【代码 15-11 】 


01 <script type="text/javascript"> 


02 /** 

03 * 定义 基 类 一 一 ClassBase 
04 * @param id 

05 * @param name 

06 * Qparam email 
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关于 【代码 15-11】 的 分 析 如 下 : 
这 段 代 码 主要 就 是 通过 原型 属性 实现 ECMAScript 类 (对象 的 继承 机 制 。 
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第 09 一 13 行 和 第 14 一 18 行 代码 通过 构造 函数 方式 和 原型 方式 创建 了 一 个 ECMAScript 类 
ClassBase， 可 以 称 其 为 “ 基 类 或 父 类 ”， 这 上段 代码 与 【代码 8-8】 的 定义 过 程 基 本 一 致 。 

第 29 一 31 行 代码 通过 构造 图 数 方式 创建 了 第 一 个 ECMAScript 类 ClassInheritA， 可 以 称 其 为 

“继承 类 或 子 类 ”， 该 类 是 创建 的 第 一 个 子 类 。 

第 30 行 代 码 调 用 Function 对 象 的 call0 方 法 ， 将 基 类 ClassBase 定义 的 几 个 属性 继承 到 子 类 
ClassInheritA 中 。 

第 32 行 代码 通过 new 关键 字 ， 将 子 类 ClassInheritA 的 原型 属性 定义 为 基 类 ClassBase 的 对 象 
实例 ， 实 现 了 子 类 ClassInheritA 对 基 类 ClassBase 的 继承 。 

男 外 ， 关 于 继承 机 制 的 原理 ， 读 者 可 以 参考 通过 原型 属性 和 原型 链 的 内 容 来 了 解 。 

第 44 一 47 行 代 码 通过 构造 函数 方式 创建 了 第 二 个 ECMAScript 类 ClassInheritB， 与 第 一 个 
ECMAScript 类 ClassInheritA 不 同 的 地 方 是 增加 了 一 个 title 属性 。 注 意 ， 该 属性 是 仅 属 于 子 类 
ClassInheritB 的 。 

第 45 行 代码 与 第 30 行 代码 功能 一 样 ， 将 基 类 ClassBase 定义 的 几 个 属性 继承 到 子 类 
ClassInheritB 中 。 

第 46 行 代 码 对 title 属性 进行 初始 化 操作 。 

第 48 行 代码 与 第 32 行 代码 功能 一 样 ， 通 过 new 关键 字 将 子 类 ClassInheritB 的 prototype 属性 
定义 为 基 类 ClassBase 的 对 象 实例 。 

第 49 一 54 行 代 人 码 对 子 类 ClassInheritB 的 showlInfo 方法 进行 了 重 定义 ， 因 为 子 类 ClassInheritB 
新 增加 了 一 个 title 属性 ， 所 以 自然 基 类 ClassBase 的 showInfo 方法 也 就 不 适用 于 子 类 ClassInheritB 
J。 

运行 页 面 ， 控 制 台 输出 的 调试 信息 如 图 15.11 所 示 。 从 浏览 器 控制 台 的 输出 结果 来 看 ， 子 类 
ClassInheritA 继承 了 基 类 ClassBase 的 全 部 属性 和 方法 ; 子 类 ClassInheritB 在 继承 了 基 类 ClassBase 
的 全 部 属性 和 方法 外 ， 还 成 功 添加 了 属于 目 己 的 属性 。 


Developer Tools - ECMAScript in 15-days - http://localhost:63342/WebstormProjects/es- 





民 刁 Inspec 加 consc D Debug' {} Style Ed @ Performa 扯 Memc 三 Netwc 县 Stora 田 " 轩 目 窜 日 可 


苗 时 Filter output | Persist Logs 
------ new ClassBase ------ chlS-es-oop-prototype-inherit,.html:40:9 
i 2 2 基 类 chlS5-es-o0op-prototype-inherit.html :36;:13 
name : tina chlS5-es-o0op-prototype-inherit,html :37:13 
email : tina@email .com chl5-es-o0op-prototype-inherit,.html:38:]13 
------ new ClassInheritA ------ 起 chlS-es-oop-prototype-inherit.html :S54:9 
id : 520 子 类 SA chlS5-es-o0p-prototype-inherit,html :36:13 
name : Xixi chlS-es-o0op-prototype-inherit.html :37:13 
email : xixi@email .com chl5-es-o0op-prototype-inherit,html:38:13 
-~------ new ClassInheritB ------ 下 一、 chlS-es-oop-prototype-inherit.html :76:9 
id : 985 子 类 “B” chl5-es-o0op-prototype-inherit,html:71:13 
name : dudu chlS5-es-o0p-prototype-inherit.html:72:13 
email : dudu@email .com chl5-es-o0op-prototype-inherit,html:73:13 
title : Boss 二- 为 子 类 “B” 添加 的 属性 chlS5-es-o0p-prototype-inherit.html:74:13 

3 RE 


15.11 通过 原型 (Prototype) 属性 实现 继承 机 制 
对 于 学 习 过 C++ 或 Java 语言 面 癌 对象 编程 的 读者 来 说 ,【 代 码 15-11】 中 所 实现 的 ECMAScript 
类 继承 已 经 很 接近 C++ 或 Java 语言 了 ， 但 还 是 有 一 点 被 设计 人 员 所 “吐槽 ”的 地 方 ， 为 什么 没有 
class 关键 字 直 接 定义 类 呢 ? 
也 许 是 为 了 啊 应 广大 设计 人 员 的 诉求 吧 ， 当 前 的 ECMAScript 6 版 本 规范 中 ， 就 真 的 增加 class 
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关键 字 定 义 “ 类 ”的 功能 。 那 么 这 个 “class” 是 不 是 与 C++ 或 Java 语言 中 的 “class” 一 样 呢 ， 请 


15.5 ECMAScript 6 面向 对 象 新 特性 


本 节 将 介绍 ECMAScript 6 语法 规范 中 新 增 的 面向 对 象 特性 一 一 class 关键 字 。 


15.5.1 通过 “class” 定 义 类 


在 ECMAScript 6 语法 规范 中 ， 可 以 通过 class 关键 字 创 建 并 定义 “类 ”。 这 个 ECMAScript 6 
的 新 特性 对 于 广大 学 习 过 C++ 或 Java 语言 的 读者 来 说 ， 是 一 个 令 人 振奋 的 消息 。 
虽然 ECMAScript 6 提供 的 class 关键 字 能 够 模仿 传统 定义 “类 ”的 方式 ， 但 其 内 部 原理 仍旧 
是 通过 原型 (prototype) 方式 来 实现 的 。 
下 面 是 通过 class 关键 字 定 义 一 个 类 的 代码 示例 〈 详 见 源 代码 ch15 目录 中 的 ch15-es-oop- 
class.html 文件 ) 。 
【代码 15-12 】 


01 <script type="text/javascript"> 


02 class UserInfo { 

U3 constructor(id, name, email) { 

04 Ehnee To los 

05 this.name = name; 

06 this.email = email; 

由 区 } 

08 showInfo() { 

09 eonaole lon( OO) 

10 console.log("name : " + this.name); 

1 癌 | console.log("email : " + this.email); 

1 } 

3 } 

14 console.10g("------ new class instance 1 -----——")}; 

1 Bs var Vv UI 1 = new UserIinfo("123", "tina", "tina@email.com"); 
16 v_ UI 1.showInfo(); 

1 console.10g("------ new class instance 2 -----—-—")}; 

18 Var VUL2 = new UserInto( 207 "xixi", “xixidemalil.com")? 
19 vV UT 2.9ShowInfo(): 


0 /elt 


关于 【代码 15-12】 的 分 析 如 下 : 

第 02 一 13 行 代码 通过 class 关键 字 定 义 了 一 个 类 UserInfo, 看 上 去 与 Ct+ 和 和 Java 语言 定义 “类 ?” 
的 方式 是 一 样 的 。 

第 03 一 07 行 代码 通 过 关键 字 constructor 定义 了 一 个 构造 方法 ， 方 法 内 定义 了 一 组 参数 ， 用 于 
表示 类 UserInfo 的 属性 。 其 中 ， 第 04 一 06 行 代码 通过 this 关键 字 为 属性 进行 了 初始 化 操作 。 

第 08 一 12 行 代 码 为 类 UserInfo 定义 了 方法 showInfo。 注 意 , 此 处 定义 方法 时 无 须 使 用 function 
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关键 字 。 
运行 页 面 ， 控 制 台 输出 的 调试 信息 如 图 15.12 所 示 。 从 浏览 器 控制 台 的 输出 结果 来 看 ， 【代码 
15-12】 与 【代码 1$-8】 上 所 实现 的 功能 和 效果 是 一 致 的 。 


Developer Tools - ECMAScript in 15-days - http://localhost:t 





[a Inspec Cons' Debug' Style Ed Performz Mer Netwr Stora 回 - 园 日 妆 日 加 


会 是 Filteroutput | Persist Logs 
~------ new class instance 1 ------ ch1l5-es-00p-ctass.htmt:351:9 

| 区 2 chlS5-es-oop-class,.html:30:;17 
name : tina chlS5-es-oop-class.html:31:17 
email : tina@Gemail .com chlS5-es-oop-class.html:32:17 
~------ new class instance 2 ------ chlS5-es-oop-class.html :38:9 
id : 520 chlS5-es-oop-class.html :30:17 
name : Xixi chlS5-es-oop-class.html:31:17 
email : xixi@email .com chlS5-es-oop-class,.html:32:17 

>| 


15.12 ”通过 class 创建 类 


15.5.2 ”通过 “extends ”继承 类 


既然 ECMAScript 6 版 本 语法 规范 中 已 可 以 通过 class 关键 字 来 创建 并 定义 “类 ”了 ， 自 然 也 
实现 了 “类 ”的 继承 。 与 其 他 面 癌 对 象 高 级 语言 一 样 ，ECMAScript 6 语法 规范 中 同样 使 用 了 
extends 关键 字 来 定义 类 继承 。 

下 面 是 通过 extends 关 键 字 定义 一 个 类 继承 的 代码 示例 ( 详 见 源 代码 ch1s 目录 中 的 ch15-es-oop- 
class-extends.html 文件 ) 。 

【代码 15-13 】 


01 <script type="text/javascript"> 


02 /** 

了 本 * class --— UserInfto 

04 */ 

Us class UserInfo { 

06 constructor(id, name, email) { 

0 Chiseid = Td 

08 this.name = name; 

09 this.email = email; 

10 } 

1al showInfo() { 

1 bs eonsolealog (id eh ld) 

1 医 j console.log("name : " + this.name); 
14 console.log("email : " + this.email); 
Is } 

16 } 

1 console.1log("-----—- new base class instance ------—"); 
18 var Vv USer = new UserIinfo("123", "tina", "tina@email.com"); 
Ly VvV_Uuser.showInfo(); 

20 /** 

21 * class --—- ManagerInfo extend UserInfo 

之 之 */ 

| class ManagerInfto extends UserIinfo { 

24 constructor(id, name, email, title) { 
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ps) super(id, name, email); 

26 this title = titles 

| } 

28 showInfo() { 

29 super.showInfo(); 

本 中 Sonsoleslog(T title 7" thise ECLeh 

本 下 } 

3 } 

澡 console.1log("------ new sub class instance ------ sn 
34 Var Vv manager = new ManagerInfo ("xixi", "xixi", "xixi@email.com", "princess"); 
SI Vv_manager.showInfo(); 


3000 </script> 


关于 【代码 15-13】 的 分 析 如 下 : 

【代码 15-13】 是 在 【代码 15-12】 基 础 上 修改 而 成 的 ， 主 要 就 是 类 ManagerInfo 对 类 UserInfo 
继承 的 实现 。 

第 05 一 16 行 代码 是 定义 父 类 UserInfo 的 过 程 ， 与 【代码 15-12】 中 的 定义 过 程 完全 一 致 。 

第 23 一 32 行 代码 是 定义 子 类 ManagerInfo 的 过 程 ， 重 点 就 是 使 用 关键 字 extends 来 继承 父 类 
UserIntfo 。 

第 24 一 27 行 代码 通过 关键 字 constructor 定义 了 一 个 构造 方法 ， 方 法 内 定义 了 一 组 参数 ， 用 于 
表示 子 类 ManagerInfo 的 属性 。 注 意 ， 相 比 父 类 UserInfo 的 属性 ， 这 里 增加 了 一 个 title 属性 。 

第 25 行 代码 通过 super 方法 默认 调用 父 类 UserInfo 的 构造 方法 ， 这 行 代 码 是 必须 写 的 ， 和 否则 
就 会 出 现 错误 。 

第 26 行 代 码 通过 this 关键 字 为 title 属性 进行 了 初始 化 操作 。 

第 28 一 31 行 代码 为 子 类 ManagerInfo 定义 了 方法 showInfo， 由 于 父 类 也 有 一 个 同名 的 方法 ， 
这 里 的 方法 showInfo 相当 于 一 个 重 载 方法 。 因 此 ， 第 29 行 代码 先 通 过 super 方法 默认 调用 父 类 
UserInfo 的 方法 showInfo， 然 后 在 第 30 行 代 码 重 写 对 title 属性 的 操作 。 

运行 页 面 ， 控 制 台 输出 的 调试 信息 如 图 15.13 所 示 。 从 浏览 器 控制 台 的 输出 结果 来 看 ， 【代码 
15-13】 实 现 了 “类 ”的 继承 操作 。 


Developer Tools - ECMAScript in 15-days - http://localhost:63342/WebstormPr 





Ca Inspector Console Debugger Style Editor Performance Memory Network Sorage 回 - 辕 日 时 | 日 加 


人 曾 时 Filter output [| Persist Logs 
------ new base class instance ------ chl5-es-oop-class-extends .htnml :40:9 

id: :223 chl5-es-oop-class-extends.html:34:17 

| name : tina chlS5-es-oop-class-extends .html:35:17 
email : tinagemail.com chl5-es-oop-class-extends .html:36:17 
------ new sub class Instance ------ chl5-es-oop-class-extends.htnl :59:9 

和 四: 区区 于 ch15-es-00p-cLass-extends .htmlL:34:17 
name : xixi chl5-cs-oop-class-cxtecnds.html :35:17 
email : Xixie@eemait.com chlS-es-oop-class-extends.html:36:17 


title : princess chl5-es-oop-class-extends .html :S55:]17 





15.13 ”通过 extends 继承 类 


15.5.3 ”类 的 setter 和 getter 方法 


严格 来 说 ，ECMAScript 6 语法 规范 中 关于 “类 ”的 存 值 setter 方法 和 取 值 getter 方法 在 
ECMAScript 5 版 本 规范 中 就 已 经 存在 了 。 这 里 介绍 存 值 setter 方法 和 取 值 getter 方法 ， 是 为 了 更 好 
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地 与 ECMAScript 6 新 增 的 类 class 特性 结合 使 用 。 
下 面 是 一 个 在 类 class 中 使 用 存 值 setter 方法 和 取 值 getter 方法 的 代码 示例 〈 详 见 源 代码 ch15 
目录 中 的 ch15-es-oop-class-set-get.html 文件 ) 。 
【代码 15-14】 


01 <script type="text/javascript"> 


02 class UserTinfol 

03 eonstructor(ty 1 

04 } 

05 get id() { 

06 Eeturne thls Lg 

Um } 

08 set id(value) { 

I this. id = value; 

10 ] 

bil } 

有 console.10g("-----—- new class instance -一 一 一 一 一 a 
3 var Vv ui = new UserInfo() ; 

14 console.log(v ui.id); 

15 he 

16 econsoles tog( aq Tv UL Ld)> 

LE console log( Tg :0 Vv 0) 


ES /geript> 


关于 【代码 15-14】 的 分 析 如 下 : 

第 02 一 13 行 代码 通过 关键 字 class 定义 了 一 个 类 UserInfo。 

第 03 一 04 行 代码 通过 关键 字 constructor 定义 了 一 个 空 的 默认 构造 方法 。 

第 05 一 07 行 和 第 08 一 10 行 代码 分 别 通过 getter 方 法 和 setter 方 法 定义 了 一 个 属性 id 的 存储 器 。 

运行 页 面 ， 控 制 台 输出 的 调试 信息 如 图 15.14 所 示 。 从 浏览 器 控制 台 的 输出 结果 来 看 ， 在 未 通 
过 setter 方法 为 属性 id 存储 数据 前 ， 通 过 getter 方法 获取 的 属性 id 值 为 undefined。 而 在 通过 setter 
方法 为 属性 id 存储 数据 “id-001” 后 ， 通 过 getter 方法 成 功 获取 了 属性 id 值 “id-001”。 


Developer Tools - ECMAScript in 15-days - http://locathost:63342/Webstorm 
Ca Inspector Console Debugger Style Editor Performance Memory Network Storage 轩 " 园 目 窒 口 了 可 





兽 富 Filter output | Persist Logs 
------ new class instance ------ chlS5-es-oop-class-set-get.html:36:9 
undefined chlS-es-oop-class-set-get.html:38:9 

| id : id-661 chl5-es-oop-class-set-get.html:40:;9 
id : id-661 ch1l5-es-00p-ctass-set-get.htmt:41:9 


15.14 ”类 的 setter 方法 和 getter 方法 
Ev 
15.6 本草 小 结 


本 草 主要 介绍 了 ECMAScript 6 语法 规范 中 关于 面 问 对 象 编程 的 知识 ， 包 括 面 加 对象 基 础 、 
ECMAScript 对 象 应 用 、ECMAScript 对 象 类 型 ， 以 及 一 些 ECMAScript 6 类 (class) 新 特性 的 知识 ， 
并 通过 一 些 具 体 实 例 进行 了 讲解 。 
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最 后 一 章 将 介绍 一 下 ECMAScript 7 & 8 版 本 所 带 来 的 新 特性 。 虽 然 ，ECMAScript7 & 8 版 本 
更 新 的 内 容 不 多 , 但 还 是 增加 了 几 个 非常 重要 的 新 功能 , 这 几 个 新 特性 有 助 于 设计 人 员 提 高 编程 效 


16.1 ECMAScript 7 & 8 版 本 的 新 特性 


众所周知 , ECMAScript 6 (或 ECMAScript 2015 ) 版 本 是 目前 ECMAScript 语法 规范 最 重要 的 、 
也 是 内 容 最 丰富 的 一 次 版 本 更 新 。 因 此 ， 通 常 意义 上 所 讲 的 ECMAScript 最 新 版 语法 规范 也 是 指 
ECMAScript 6 版 本 所 更 新 的 内 容 。 

但 是 ， 我 们 可 能 无 意识 地 忽略 了 ECMA 国际 “TC39，JavaScript 技术 委员 会 ) 的 进取 心 。 其 
实 ， 目 从 ECMAScript 6 正式 版 本 于 2015 年 正式 发 布 以 来 ，TC39 制定 了 每 年 进行 一 次 版 本 更 新 的 
计划 。 

因此 ，TC39 在 ECMAScript 6 版 本 之 后 ， 还 推出 了 ECMAScript 7 (或 ECMAScript 2016) 和 
ECMAScript 8 (或 ECMAScript 2017) 两 个 重要 版 本 。 同 时 ， 为 了 保证 ECMAScript 语法 规范 每 年 
更 新 一 次 的 计划 得 以 实现 ,在 ECMAScript 6 版 本 之 后 ， 版 本 编号 将 会 按照 年 份 来 命名 。 也 就 是 说 ， 
新 版 ECMAScript 语法 规范 的 正式 名 称 应 该 是 ECMAScript 2016 和 ECMAScript 2017 版 本 。 


16.2 ”ECMAScript 7 (2016 ) 版 本 的 新 特性 


ECMAScript 7 〈2016) 版 本 语法 规范 中 增加 的 新 特性 只 有 两 项 ， 分 别 是 数组 对 象 的 includes() 
方法 和 指数 操作 符 。 


ECMAScript 从 零 开 始 学 ( 视频 教学 版 ) 
16.2.1 Array.prototype.includes() 方 法 


Array.prototype.includes() 方 法 是 ECMAScript 7 版 本 语法 规范 中 新 增 的 特性 ， 该 方法 的 基本 语 
法 格式 如 下 : 
Array.prototype.includes (value : any) 


该 方法 用 于 检查 value 值 是 否 是 数组 Array 的 数组 项 ， 夺 是 ， 则 返回 tue， 否 则 返回 false。 

读者 可 能 会 注意 到 ，Array 对 象 有 一 个 indexOf0 方 法 与 includes0 方 法 功能 上 很 类 似 ， 其 实 两 
者 还 是 有 区 别 的 。 下 面 看 一 个 对 比 使 用 indexOf0) 方 法 与 includes() 方 法 的 代码 示例 〈 详 见 源 代码 
appendix 目录 中 的 appendix-es-7-array-includes.html 文件 ) 。 

【代码 16-1】 


01 <script type="text/javascript"> 
O02 USS gout 


加 局 We 

04 * ECMAScript 7 (2016) 新 特性 - includes() 方 法 

05 oy 

06 console.10g("---------— Search Array ---------—— > 

07 let varr = [I "Hellor "ECMASCPTIDE Se ol 

08 if(arr.indexOf ('ECMAScript') !== -1) 

09 console.log("Array.indexOf ('ECMAScript') return true."); 
10 else 

a lel console.log("Array.indexOf ('ECMAScript') return false."); 
12 if(arr.includes('ECMAScript")) 

IL console.log("Array.includes('ECMAScript') return true."); 
14 else 

下 console.log("Array.includes ('!ECMRAScript') return false."); 
16 console.10g("---------—— Search NaN -----—-—---—-")} 

I let arrNaN = [NaN]; 

18 if(arrNaN.indexOf (NaN) !== -1) 

19 console.log("Array.indexOf (NaN) return true."); 

20 else 

之 下 console.log("Array.indexOf (NaN) return false."); 

学 六 if (arrNaN.includes (NaN)) 

2 console.log("Array.includes (NaN) return true."); 

24 else 

2 console.log("Array.includes (NaN) return false."); 


oO </acrint> 


关于 【代码 16-1】 的 分 析 如 下 : 

第 07 行 代码 定义 了 一 个 字符 串 数 组 arr 变量 。 

第 08 一 11 行 代 码 通过 Array 对 象 的 mdexOf(O 方 法 查询 数组 变量 arr 中 是 否 包含 指定 的 数组 项 
'ECMAScript。 注 意 ， 在 使 用 indexOf0 方 法 时 ， 要 通过 与 数值 -1 进行 严格 比较 〈! 和 一) 来 判断 查询 
结果 。 

第 12 一 15 行 代码 通过 Array 对 象 新 增 的 includes0 方 法 查询 数组 变量 arr 中 是 否 包含 指定 的 数 
组 项 'ECMAScript'。 注 意 ， 在 使 用 includes() 方 法 时 ， 是 不 需要 与 数值 -1 进行 严格 比较 〈! 王 ) 就 可 
以 得 到 查询 结果 的 。 

第 17 行 代码 定义 了 一 个 特殊 值 数组 arrNaN 变量 ， 该 数组 定义 了 一 个 特殊 值 的 数组 项 NaN。 
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第 18 一 21 行 代码 与 第 08 一 11 行 代码 类 似 ， 通 过 Array 对 象 的 indexOf() 方 法 查询 数组 变量 
arrNaN 中 是 否 包含 指定 的 特殊 值 数 组 项 NaN。 

第 22 一 25 行 代码 与 第 12 一 15 行 代码 类 似 ， 通 过 Array 对 象 新 增 的 includes() 方 法 查询 数组 变 
量 arrNaN 中 是 否 包 含 指 定 的 特殊 值 数 组 项 NaN。 

下 面 运行 测试 一 下 【代码 16-1】 所 定义 的 HTML 页 面 ， 并 使 用 调试 器 查看 控制 台 输 出 的 调试 
信息 ， 页 面 效 果 如 图 16.1 所 示 。 


Developer Tools - ECMAScript VE A 





[a Inspectc Consol Debugge Style Edit' Performan Memor Networ Storag 思 ~" 国 目 崔 口 了 可 


商 时 Filter output [| Persist Logs 
---------- Search Array ---------- < -es-7-array-incLudes.htmtL:27:9 
Array.index0f('ECMAScript') return 七 rue . -es-7-array-incLudes .htmL:30:13 
Array.includes('ECMAScript’') return true. “eSs-7-array-includes.html:34:13 
---------- Search NaN ---------- -es-7-array-inctudes.htmtL:37;:9 
Array.index0f(NaN) return falLse， “~es-7-array-includes.html:42:13 
Array.includes(NaN) return true,. <Ee—— "~es-7-array-includes.html:44:13 


图 16.1 Array.prototype.includes() 方 法 


如 图 16.1 所 示 ， 在 使 用 indexOf() 方 法 与 includes() 方 法 查询 常规 数组 项 〈 如 字符 串 类 型 ) 时 ， 
功能 是 基本 一 致 的 。 唯 一 的 区 别 就 是 ，includes() 方 法 在 使 用 上 要 比 indexOf0 方 法 简单 一 些 。 那 么 ， 
indexOf) 方 法 与 includes(0) 方 法 之 间 的 主要 区 别 是 什么 呢 ? 

如 图 16.1 中 箭头 所 指 , 在 使 用 indexOf0 方 法 与 includes(0) 方 法 查询 特殊 值 数 组 项 (如 NaN ) 时， 
includes() 方 法 就 发 挥 不 出 作用 了 (查询 结果 返回 false) ， 而 includes0 方 法 是 完全 可 以 胜任 的 ( 查 
询 结果 返回 true) 。 


16.2.2 ”指数 操作 符 


在 ECMAScript 6 版 本 语法 规范 中 ,指数 运算 一 般 是 通过 全 局 Math 对 象 的 pow() 方 法 来 实现 的 。 
而 在 ECMAScript 7 版 本 语法 规范 中 ， 新 定义 了 一 个 指数 运算 从 (**， 用 连续 两 个 * 号 表示 ) ， 这 
样 就 极 大 地 优化 了 编写 指数 运算 的 代码 量 。 

下 和 耐看 一 个 使 用 指数 运算 人 符 (** ) 的 代码 示例 ( 详 见 源 代 人 码 appendix 目录 中 的 
appendix-es-7-indices.html 文件 ) 。 

【代码 16-2】 
01 <script type="text/javascript"> 
02 USe Strict > 


03 és 

04 * ECMAScript 7 (2016) 新 特性 - 指数 运算 

05 td 

06 console.10g("---—-—-—---—- 指数 运算 ---------- ys 
07 Var iTIndices = 2**10; 

08 console slog 2 10 lindices): 


09 </seript> 
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关于 【代码 16-2】 的 分 析 如 下 : 

第 07 行 代码 通过 指数 运算 人 符 ** 计 算 了 数值 2 的 10 次 早 。 

下 面 运行 测试 一 下 【代码 16-2】 所 定义 的 HTML 页 面 ， 并 使 用 调试 器 查看 控制 台 输 出 的 调试 
信息 ， 页 面 效果 如 图 16.2 所 示 。 





Developer Tools - ECMAScript in 15-days - I 


[a Inspectc Consol Debuggt Style Edit Performan Memor Networ Storag 回 - 园 日 闻 晶 加 


会 时 Filter output | Persist Logs 
Ne 指数 运算 ---------- appendix-es-7-indices,.html:27:9 
2” 19 = 1024 appendix-es-7-indices.html:29:9 


ETT 


Bonsnnansnsansnsansnsansntsnnansntansnsanantsnsantasansnsaraninisnsasannassaaantasastnsassntatantasassnnnsniassnsasantaasnsasannsnsniansnsassasntansnsantnsatasiniantasasantasnaantasansnnsnsasanntantniansatassntatantatansnsarsniniantasanntasniatansatassntasssaeanttassntasasats) 


图 16.2 指数 运算 符 (**) 
16.3 ECMAScript 8 (2017 ) 版 本 的 新 特性 


ECMAScript 8 (2017) 版 本 语法 规范 中 增加 的 新 特性 相对 要 多 一 些 ， 下 面 重点 列举 几 个 实用 
的 特性 。 


16.3.1 字符 串 填 充 〈String Padding ) 


ECMAScript 8 (2017) 版 本 语法 规范 中 新 增 了 一 组 内 置 的 、 用 于 字符 串 填 充 的 方法 ， 分 别 为 
padStart0 和 padEnd()。 这 一 组 方法 能 够 通过 填充 字符 串 的 首部 或 尾部 来 保证 字符 串 达 到 固定 的 长 
度 ， 并 完成 字符 串 的 插入 功能 。 

关于 padStart() 方 法 的 基本 语法 格式 如 下 : 


String.padStart (targetLength [, padString]) 


参数 说 明 : 
e targetLength: 该 参数 是 必需 的 ， 用 于 表示 字符 串 要 设 定 的 目标 长 度 ， 即 最 终生 成 的 字符 串 长 
度 。 


e@ padString: 该 参数 是 可 选 的 ， 用 于 指定 所 需 填 充 的 字符 串 。 

关于 padEnd() 方 法 的 基本 语法 格式 如 下 : 

String.padEnd (targetLength [，PadString]) 

参数 说 明 : 

e ”targetLength: 该 参数 是 必需 的 ， 用 于 表示 字符 串 要 设 定 的 目标 长 度 ， 即 最 终生 成 的 字符 串 长 度 。 
e@ padString: 该 参数 是 可 选 的 ， 用 于 指定 所 需 填充 的 字符 串 。 

下 面 看 一 个 使 用 padStart0 方 法 与 padEnd() 方 法 完成 字符 串 填 充 的 代码 示例 〈 详 见 源 代 码 
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appendix 目录 中 的 appendix-es-7-string-padding.html 文件 ) 。 
【代码 16-3 】 


01 <script type="text/javascript"> 
02 USe bere 


03 ME 

04 * ECMAScript 8 (2017) 新 特性 - 字符 串 填 充 (String Padding) 
05 法 

06 console.10g("-———————-—-— 字符 串 填充 (String Padding) ----------")，; 
A var SEP = 

08 str = str.padStart (4, "ECMA"); 

09 console.log("str.padStart (4, \"ECMA\™) = " + str); 

10 str = Str.padSstart (59)? 

Ibil console log("str.padstartls) = TT gbrys 

ji str = Str padStart (0. ”Hello 

13 eonsoleslooq(Tstr padSstart (Ll0 NIHelloN y=" Tb gtre)s 

14 str = gte padPnd(lor "Seeiper Ds 

I CGOnsole loq("str padEnd(l6r  \"ScripEN yy =" SEE 

16 str = str.padEngd (17); 

1 econsole. log("str.padEnd(li1) = "| Str}s 

18 Str = Ste DadEngd( Ex 

19 console loo( "str padEndole = st 


200</3cript> 


关于 【代码 16-3】 的 分 析 如 下 : 

第 07 行 代码 定义 了 一 个 空 字符 串 变 量 str。 

第 08 行 代码 通过 使 用 padStart(4, "ECMA") 方 法 ， 先 设 定 字符 串 目 标 长 度 为 4， 然 后 在 首部 插 
入 字符 串 "ECMA"。 

第 10 行 代码 通过 使 用 padStart(5) 方 法 再 次 从 字符 串 首部 设 定 字 符 串 目标 长 度 为 5。 

第 12 行 代码 通过 使 用 padStart(10, "Hello") 方 法 再 次 设 定 字符 串 目 标 长 度 为 10, 然后 在 首部 插 
入 字符 串 "Hello"。 

第 14 行 代码 通过 使 用 padEnd(16, "Script") 方 法 再 次 设 定 字 符 串 日 标 长 度 为 16， 然 后 在 尾部 插 
入 字符 串 "Script"。 

第 16 行 代码 通过 使 用 padEnd(17) 方 法 再 次 从 字符 串 尾部 设 定 字 符 串 目标 长 度 为 17。 

第 18 行 代码 通过 使 用 padEnd(18,"!") 方 法 再 次 设 定 字符 串 目 标 长 度 为 18， 然 后 在 尾部 插入 标 
凡人 号 "1"。 

下 面 运行 测试 一 下 【代码 16-3】 所 定义 的 HTML 页 面 ， 并 使 用 调试 器 查看 控制 台 输 出 的 调试 
信息 ， 页 面 效 果 如 图 16.3 所 示 。 





Developer Tools - ECMAScript in 15-days - http://localhost:63342/WebstormProject 


人 品 Inspec 加 Cons D Debuc {} Style Ec @& Perform 失 Mem 三 Netw 电 stor: 田 " 园 有 目 迪 口 可 


谷 时 Filter output [_ | Persist Logs 
a 字符 囊 填 充 (String Padding) ---------- appendix-es-7-string-padding.html:27:9 
| str.padStart(4, "ECMA") = ECMA appendix-es-7-string-padding.html:30:9 
str.padSstart(5) = ECMA appendix-es-7-string-padding.html:32:9 
str.padStart(16, "Hello") = Hello ECMA appendix-es-7-string-padding.html:34:9 
str.padEnd(16, "Script") = Hello ECMAScript appendix-es-7-string-padding.html:36:9 
str.padEnd(17) ~ HeLLo ECMAScript appendix-es-7-string-padding.html:38:9 
str.padEnd(18, "!") = Hello ECMAScript ! appendix-es-7-string-padding.html:40:9 


16.3 字符 串 填 充 (String Padding) 
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如 图 16.3 所 示 ， 在 通过 使 用 padStart() 方 法 与 padEnd() 方 法 进行 一 系列 的 操作 之 后 ， 成 功 生成 
了 字符 串 “Hello ECMAScript !”。 


16.3.2 ”对 象 志 有 历 


ECMAScript 8(2017) 版 本 语法 规范 中 新 增 了 一 组 用 于 对 象 届 有 历 的 方法 , 分 别 为 Object.values() 
与 Object.entries()。 这 一 组 方法 能 够 按照 对 象 的 键 值 对 进行 届 历 ， 并 将 裔 有 历 结 果 返 回 为 数组 格式 。 

关于 Objectvalues() 方 法 的 基本 语法 格式 如 下 : 

Object .values (obj) 

参数 与 返回 值 说 明 : 

@ ”obj: 该 参数 是 必需 的 ， 用 于 表示 需要 遍历 的 目标 对 象 。 

e@ 返回 值 : 由 “ 键 值 对 ”中 的 值 所 组 成 的 数组 。 

关于 Object.entries() 方 法 的 基本 语法 格式 如 下 : 

Object .entries (obj) 

参数 与 返回 值 说 明 : 

@ obj: 该 参数 是 必需 的 ， 用 于 表示 需要 遍历 的 目标 对 象 。 

@ 返回 值 : 由 “ 键 值 对 ”所 组 成 的 二 维 数组 。 

下 面 看 一 个 使 用 Object.values(0) 方 法 与 Object.entries(0) 方 法 进行 对 象 遍 历 的 代码 示例 ( 详 见 源 代 
码 appendix 目录 中 的 appendix-es-7-object-values-entries.html 文件 ) 。 

【代码 16-4】 


01 <script type="text/jJavascript"> 
UZ use stelee: 


03 J 

04 * ECMAScript 8 (2017) 新 特性 - 对 象 遍 历 

05 三 大 

06 console .log("---------- 对 象 遍 历 ----------"); 

OF const ob = /Ihe "Hello Pe "ECMAScript"}: 

08 console.1o0g("-------- Object .values() -------- es 
09 console.1log (Object .values (obj)); 

EU Console .log (Object .values ("ECMA") ) ; 

el console.10g("-------- Object .entries () -------—-—"); 
1 Console .log (Object .entries (obj)); 


I /scripe> 


关于 【代码 16-4】 的 分 析 如 下 : 

第 07 行 代码 定义 了 一 个 对 象 obj， 并 进行 初始 化 操作 。 

第 09 行 代码 通过 使 用 Object.values() 方 法 对 对 象 obj 中 的 值 进 行 了 过 有 历 操作 , 将 会 返回 一 个 对 
象 中 “ 值 ”的 数组 。 

第 10 行 代码 通过 使 用 Object.values("ECMA") 方 法 直接 对 字符 串 "ECMA" 进 行 毅 历 操作 。 注意 ， 
在 直接 对 字符 串 进行 遍历 时 ， 会 先 将 字符 串 "ECMA" 转 换 为 对 象 格式 {0:'E', 1:'C', 2:'M', 3:'A'}。 
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第 12 行 代码 通过 使 用 Object.entries() 方 法 对 对 象 obj 中 的 值 进行 了 遍历 操作 , 将 会 返回 一 个 对 
象 中 “ 键 值 对 ”的 二 维 数组 。 

下 面 运 行 测试 一 下 【代码 16-4】 所 定义 的 HTML 页面， 并 使 用 调试 器 查看 控制 台 输 出 的 调试 
信息 ， 页 面 效 果 如 图 16.4 所 示 。 


Developer Tools - ECMAScript in 15-days - http://localhost:63342/Wetb 





a Inspecto Consol: Debugge Style Editc Performanc Memor Networ Storagt 轩 ~ 轩 上 目 内 口 了 可 
闸 时 Filter output _] Persist Logs 


“Object-values-entries,.html:27:9 


---------- 对 象 追 历 ---------- 

-------- Object.values() -------- ~Object-values-entries,html:29:9 
| bp Array [ "Hello", "ECMAScript"” ] ~O0bject-values-entries.html:30:9 

* Array [ "E"”, "C", "M", "A” ] “Object-values-entries.html:31:9 

-------- Object.entries() -------- “Object-values-entries.html:32:9 

vw [.] “Object-values-entries,.html:33:9 


>» 0: Array [ "h", "Hello"” ] 
» 1: Array [ "e", "ECMAScript” ] 
length: 2 


图 16.4 对 象 遍历 


16.3.3 ”异步 函数 (Async Function) 


ECMAScript 8 (2017) 版 本 语法 规范 中 新 增 了 异步 函数 (Async Function) 的 语法 ， 有 具体 是 通 
过 “async/await” 来 定义 的 。 通 过 异步 函数 (Async Function ) 并 结合 使 用 promise 对 象 ， 就 可 以 很 
方便 地 实现 异步 函数 功能 。 
其 实 ，promise 对 象 是 ECMAScript 6 (2015) 版 本 语法 规范 中 针对 异步 编程 而 新 增 的 内 容 。 虽 
然 promise 对 象 为 异步 编程 带 来 一 定 的 惊喜 ， 但 在 状态 控制 与 回调 函数 方面 也 有 一 定 的 缺陷 。 
技术 总 是 在 不 断 地 进步 ， 随 着 ECMAScript 8 (2017) 版 本 语法 规范 中 新 增 的 异步 函数 (Async 
Function ) 的 出 现 ， 将 promise 对 象 与 异步 函数 (Async Function ) 结合 起 来 使 用 ， 基 本 算是 对 
ECMAScript 脚本 语言 异步 编程 带 来 了 本 质 上 的 突破 。 
在 学 习 异 步 亢 数 (Async Function) 之 前 ， 先 来 了 解 一 下 promise 对 象 的 使 用 方法 ， 有 助 于 读 
者 进一步 理解 异步 胃 数 (Async Function ) 的 使 用 。 
若 要 使 用 promise 对 象 ， 须 先 创建 一 个 Promise 对 象 实例 ， 基 本 语法 格式 如 下 : 
/** 
* 创建 Promi se 对 象 
pd 
const promise = new Promise(function(resolve, reject) { 
if (/* 异步 操作 成 功 */) { 
resolve (value); 
} else { 
reject (error); 


| 
J 


参数 说 明 : 
promise 构造 函数 接受 一 个 函数 作为 参数 ， 该 函数 的 两 个 参数 分 别 是 resolve 和 reject。 注 意 ， 
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这 两 个 参数 是 两 个 图 数 ， 且 是 由 ECMAScript 引擎 内 置 定义 的 。 


resolve 图 数 的 作用 是 将 promise 对 象 的 状态 从 “未 完成 ” 变 为 “成 功 ”,， 在 异步 操作 成 功 时 调 


用 ， 并 将 异步 操作 的 结果 作为 参数 传递 出 去 。 


reject 国 数 的 作用 是 将 promise 对 象 的 状态 从 “未 完成 ” 变 为 “失败 ”， 在 异步 操作 失败 时 调 


用 ， 并 将 异步 操作 报 出 的 错误 作为 参数 传递 出 去 。 


promise 对 象 实例 生成 以 后 ,就 可 以 用 then() 方 法 分 别 指定 resolved 状态 和 rejected 状态 的 回调 


函数 ， 基 本 语法 格式 如 下 : 


promise.then(function(value) { 
// success 

}, function(error) { 
// failure 

Ws 


参数 说 明 : 
then() 方 法 接受 两 个 回调 函数 作为 参数 。 第 一 个 回调 函数 〈 必 需 的 ) 在 promise 对 象 的 状态 变 


为 resolved 时 调用 ; 第 二 个 回调 函数 〈 可 选 的 ) 在 promise 对 象 的 状态 变 为 rejected 时 调用 。 


下 面 看 一 个 使 用 promise 对 象 执 行 异 步 编 程 的 代码 示例 〈 详 见 源 代码 appendix 目录 中 的 


appendix-es-6-promise.html 文件 ) 。 
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【代码 16-5 】 


01 <script type="text/javascript"> 
U2 Use StrucE,s 


03 /** 

04 * ECMAScript 6 (2015) 新 特性 - promise 对 象 

US A 

06 console.10g("-—-—-—-—-———— promise 对 象 ----------") ; 
Wy /** 

08 * function - runPromise 

09 * @returns {Promise} 

TU 上 

Ibal function runPromise() { 

12 var p = new Promise (function (resolve, reject) { 
13 setTimeout (function () { 

14 console.log('runPpromise() done.'); 

与 resolve('resolve data'); 

16 }, 1000); 

LE }) > 

18 return p; 

19 } 

20 /** 

21 * call runPromise () .then() 

22 St 

2 runPromise () .then(function (value) { 

24 console.log("call runPromise () .then() : " + value); 
2 


ZO0r<ASeCripE> 


关于 【代码 16-5】 的 分 析 如 下 : 
第 11 一 19 行 代码 定义 一 个 函数 runPromise0。 其 中 ， 第 12 一 17 行 代码 通过 promise 对 象 定义 
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一 个 对 象 实例 p， 并 通过 setTimeout() 方 法 定义 1000ms 时 长 间 隅 的 操作 ， 执 行 第 15 行 代码 定义 的 
resolve() 函 数 ; 第 18 行 代 码 通过 return 关键 字 返 回 promise 对 象 实例 p。 

第 23 一 25 行 代码 通过 promise 对 象 调 用 then() 方 法 定义 异步 回调 函数 。 

下 面 运行 测试 一 下 【代码 16-5】 所 定义 的 HTML 页 面 ， 并 使 用 调试 器 查看 控制 台 输 出 的 调试 
信息 ， 页 面 效 果 如 图 16.5 所 示 。 


Developer Tools - ECMAScript in 15-days - http://localhost:63342/We 





[a Inspectc Consol Debugge Style Editc Performan' Memor Networ Storag' 回 7* 园 日 池 口 了 可 


闸 时 Filter output _| Persist Logs 
== promise 对 象 ---------- appendix-es-6-promise.html:27:9 
runPromise() done. appendix-es-6-promise.html:35:21 
call runPromise().then() : resolve data appendix-es-6-promise.html:45:12 





PTT "TT 


aneenennnnnnnsesesnsnnnnessennnseeeesennnnneeenennseeerrnnnseeannneerrrnnnessrneerrrnne:eernsneeeeennneeerrnnneesneneersrnnneeernnneernnnneernrnneeennnneeeernnneennneernrren:eeenneeeerennneeesnrnne:enenneeernnnn:eernneerrnnnerernn.eee, 


16.5 promise 对 和 象 异步 函数 


如 图 16.5 中 箭头 所 指 ， 通 过 promise 对 象 的 异步 编程 操作 ， 成 功 地 异步 获取 了 第 15 行 代码 定 
义 的 字符 串 "resolve data"。 

了 解 promise 对 象 的 使 用 方法 后 , 就 可 以 学 习 异 步 图 数 (Async Function ) 了。 异步 负数 (Async 
Function ) 通过 “async/await” 定 义 ，async 图 数 返 回 一 个 promise 对 象 ， 并 使 用 then 方法 定义 回调 
冰 数 。 当 函数 执行 时 ， 一旦 遇 到 await 就 会 先 返 回 ， 等 到 异步 操作 完成 ， 再 接着 执行 函数 体内 后 面 
的 语句 。 

下 面 看 一 个 异步 亢 数 (Async Function ) 执行 异步 编程 的 代码 示例 〈 详 见 源 代 码 appendix 目录 
中 的 appendix-es-8-async-func.html 文件 ) 。 

【代码 16-6】 


01 <script type="text/javascript"> 
U2 USS SeecG 


03 A 

04 * ECMAScript 8 (2017) 新 特性 - 异步 函数 (Rsync Func) 
05s Ey 

06 console.10g("-—--—-—--——— 异步 函数 (Async Func) ---------- a 
[OM /** 

08 * function - runPromise 

09 * Qreturns {Promise} 

10 dé 

Tel function runPromise() { 

12 Vvar p = new Promise (function (resolve, reject) { 
3 setTimeout (function () { 

14 console.log('runPpromise() done.'); 

1 resolve('resolve data'); 

16 }, 1000); 

1 }); 

18 return p; 

19 } 

2 /** 

21 * async function - callPromise 

之 之 */ 
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ECMAScript 从 零 开 始 学 ( 视频 教学 版 ) 


| async function callPromise() { 

24 console.log("call runPromise()") :; 

2 Const externalFetchedText = await runPromise () : 
26 console.log("received : " + externalFetchedText); 
27 } 

28 My 

29 * procedure callPromise() 

30 ey 

本 可 callPromise(); 

32 console slog list step. em 

sR callPromise(); 

34 Consoles log("2ng Se ™): 

3 与 callPromise(); 

36 Sonsoleslog(™ 3rd Stop em 


JP< acreipt> 


关于 【代码 16-6】 的 分 析 如 下 : 

这 段 代 码 是 在 【代码 16-5】 基 础 上 改写 而 成 的 ， 读 者 可 以 清楚 地 看 到 通过 将 异步 函数 (Async 
Function ) 与 promise 对 象 结合 在 一 起 实现 异步 函数 的 编写 过 程 。 

第 23 一 27 行 代码 通过 async 定义 异步 函数 callPromise() 提 供 调 用 。 其 中 ,第 25 行 代码 通过 await 
先 返 回 ， 等 到 异步 操作 完成 后 ， 再 接着 执行 函数 体内 后 面 的 代码 。 

下 面 运行 测试 一 下 【代码 16-6】 所 定义 的 HTML 页 面 ， 并 使 用 调试 器 查看 控制 台 输 出 的 调试 
信息 ， 页 面 效 果 如 图 16.6 所 示 。 





Developer Tools - ECMAScript in 15-days - http://localhost:63342/Webstorrr 


a Inspector Console Debugger Style Editor Performance Memory Network Storage 回 - 园 日 宗 日 上 口 


茄 宇 Filter output 上 Persist Logs 
I 异步 函数 (Async Func) ---------- appendix-es-8-async-func.html:27:9 
call runpPromisel() appendix-es-8-async-func.html:45:13 
lst step... appendix-es-8-async-func.html:53:9 
call runPromise() appendix-es-8-async-func.html:45:13 
2nd step... appendix-es-8-async-func.html:55:9 
call runPromisel() appendix-es-8-async-func.html:45:13 
3rd step... appendix-es-8-async-func.html:57:9 
runPromise() done. appendix-es-8-async-func.html:35:2]1 
received : resolve data Axe” appendix-es-8-async-func.html:47:13 

| runPromise() done. appendix-es-8-async-func.html:35:2]1 
received : resolve data <&” appendix-es-8-async-func.html:47:13 
runPromise() done. appendix-es-8-async-func.html:35:2]1 
received : resolve data < 一 appendix-es-8-async-func.html:47:13 


FETIPTET TT TT 


Denseneneenennneenen000000000000000n000000000000000000000000000000 


16.6 ”异步 函数 (Async Function) 


如 图 16.6 中 箭头 所 指 ， 通 过 将 异步 函数 (Async Function ) 与 promise 对 象 结 合 在 一 起 ， 成 功 
地 实现 了 异步 编程 操作 。 
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16.4 本 盖 小 结 


本 草 主 要 介绍 了 ECMAScript7 & 8 版 本 语法 规范 中 新 增 的 特性 , 包括 字符 串 填 充 、 对 象 通 历 、 
异步 函数 等 内 容 。 这 部 分 内 容 属 于 目前 ECMAScript 语法 规范 中 的 最 新 内 容 , 且 有 一 定 的 学 习 难 度 ， 
相信 通过 文中 给 出 的 代码 实例 可 以 帮助 读者 加 深 理 解 这 些 新 增 的 特性 。 
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